Fonts - Basics | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• What are fonts and how are they used?
• CSS Properties that control fonts

Introduction to Fonts

Fonts are an important part of a website’s branding. They control how the text on your Search experience is rendered. Although Search will default to system-available fonts, you can update the fonts on your experience through CSS to make it more in line with your brand’s fonts.

Fonts are considered assets, just like an image you display on your website might be. Not all operating systems automatically have all fonts downloaded, so we need a way to make sure a browser is able to access the fonts on your site, rather than using a font available on their computer system. We’ll walk through the ways you can load in these font assets in the following unit, but first, let’s walk through the standard properties of a font.

Remember, you can inspect the page to determine the fonts a section of a webpage is using! This will be helpful to play around with real-world examples.

Common Font Properties

Here are a few of the CSS properties you’ll be interacting with as you change your fonts.

Font Family

The font family attribute lets you define the font for a given element. The property can hold several fonts as ‘fall-backs’ if a browser isn’t able to render one of the preferred fonts. In the below example, if Arial is not available, the browser will use Helvetica. If neither are available, it’ll use sans-serif, a generic font.

--yxt-font-family: Arial, Helvetica, sans-serif;

You can see below the font-family we’re using on this very page! Try removing ‘Gilroy’ to see what happens to the text.

The Search Library stores the default font family in a variable, which is then used across the entire Search experience. You’ll learn how to override this font in the next unit.

--yxt-font-family: system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !default;

Font Weight

This controls the heaviness, or boldness of the font. You can define the font-weight through keywords: normal, bold, bolder, or lighter.

You can also define font-weight using numbers - 100, 200, 300, 400, 500, 600, 700, 800, and 900. 400 is the same as ‘normal’, and 700 is the same as ‘bold’. Not all fonts will have each font-weight defined, but you can play around in the editor to see the effects it has.

Font Style

This can be used to italicize fonts. Play around with the properties below.

Font Face

The font face declaration isn’t a property in itself, but rather pulls all the properties of a font together. We define the font-face for every variation of a font we want to use.

The properties you’ll set are below:

For the below example, we define Roboto Mono for different font weights (regular and bold) and italics.

@font-face
{
  font-family: "Roboto Mono";
  src: url('../../assets/fonts/robotomono-bold-webfont.woff') format("woff");
  font-weight: $font-weight-bold;
  font-style: normal;
}
 
@font-face
{
  font-family: "Roboto Mono";
  src: url('../../assets/fonts/robotomono-regular-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  font-style: normal;
}
 
@font-face
{
  font-family: "Roboto Mono";
  src: url('../../assets/fonts/robotomono-italic-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  font-style: italic;
}
 

For more on font-face declarations, visit this resource: https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website.