Fonts | Yext Hitchhikers Platform
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.
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;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.
a {
font-weight: bold;
&:hover
{
font-weight: normal;
}
}Font Style
This can be used to italicize fonts.
a {
font-style: italic;
&:hover
{
font-style: normal;
}
}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 in the fonts.scss file. You will typically use this property when you
Add Web Fonts
to your Search frontend.
The properties you’ll set are below:
| Property | Description |
|---|---|
| font-family | The name of the font |
| src | The URL where the font can be downloaded by the browser. |
| font-weight | This records the weight of the font you’re importing |
| font-style | This determines if the text is italicized or not |
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;
}Font Variables
Lastly, there are a few variables in the fonts.scss file that allow you to control the size of the fonts or text in your experience. You can adjust these to impact the fonts across your site.
For example, you can use the --yxt-font-size-- variables to increase the font size across your Search experience. If you want to update other font variables like boldness or height for all of the text (e.g., titles, subtitles) within your experience, you will also edit that here.
$font-weight-bold: 700;
$font-weight-semibold: 600;
$font-weight-medium: 500;
$font-weight-normal: 400;
$font-weight-light: 300;
:root {
--yxt-font-weight-bold: #{$font-weight-bold};
--yxt-font-weight-semibold: #{$font-weight-semibold};
--yxt-font-weight-medium: #{$font-weight-medium};
--yxt-font-weight-normal: #{$font-weight-normal};
--yxt-font-weight-light: #{$font-weight-light};
--yxt-font-size-xs: 10px;
--yxt-font-size-sm: 12px;
--yxt-font-size-md: 14px;
--yxt-font-size-md-lg: 16px;
--yxt-font-size-lg: 18px;
--yxt-font-size-xlg: 20px;
--yxt-font-size-xxlg: 40px;
--yxt-line-height-xs: 1;
--yxt-line-height-sm: 1.2;
--yxt-line-height-md-sm: 4/3;
--yxt-line-height-md: 1.4;
--yxt-line-height-lg: 1.5;
--yxt-line-height-xlg: 5/3;
--yxt-line-height-xxlg: 1.7;
--yxt-font-family: "Open Sans",system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}