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.

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. To learn how to do this, view the Add Web Fonts to Search Frontend Theme help article and follow the directions before going through the below steps.

For additional details on fonts and font properties, see the Fonts reference doc.

To use or update a font in Search:

1. Click Pages in the navigation bar and click on your desired site.
2. Click on the View Code Editor button.
3. Hover over the master branch and click on the pencil icon () that appears.
4. Click on the static folder.
5. Click on the scss folder.
6. This process differs depending on if you would like to set the font for all Search components or if you would like to target specific classes. Follow the steps below accordingly:
   • All Search Components
     1. Click on the fonts.scss file.
     2. Add the font name to the beginning of the --yxt-font-family variable:

     --yxt-font-family: "Roboto Mono", Arial, Helvetica, sans-serif;

   • Target Specific Classes
     1. Click on the answers.scss file.
     2. For the class you would like to target, use font-family, and include the web font name you would like to add.

      .yxt-SearchBar-title
     {
       font-family: "Roboto Mono", Arial, Helvetica, sans-serif;
     }