Add Images and Fonts | Yext Hitchhikers Platform

What You’ll Learn

By the end of this unit, you will be able to:

• Add assets to your site
• Add and reference images in your pages and cards
• Explain what fonts are and the two types you can use

Overview

Images and fonts are considered assets that you can add to your site. While Search has built-in imagery (i.e., icons) and fonts, there are many cases where you might want to add custom or brand-specific assets.

All assets can be found within the static > assets folder.

Images

You might want to add custom imagery such as an icon to your site. Images can be used in files where the library is expecting an image URL or they can be added directly to the Handlebars page if you are changing the results page or card structure.

There are two types of images you can use:

• Images that are on the web
  • Since these images have a URL, they do not need to be uploaded to Search. If you have an image URL that you want to use, you can input the URL into page or card files directly.
• Local image files
  • If you want to use an image file from your computer, you’ll need to add the images to your Search site so that they can be referenced. First, upload an image file to the /static/assets/images folder. Once the file is added you can reference it wherever the library is expecting an image URL using the following structure: static/assets/images/filename.extension.

Learn how to do this in the Add Images in Search Frontend Theme help article.

Fonts

Fonts control how the text on your Search experience is rendered. Search will default to system-available fonts, but you can update the fonts on your experience through CSS to make it more in line with your brand’s fonts.

Similar to assets, you need to upload your fonts to Search. There are two types of fonts you can add and the way you add them differs. To see more details on how to add web fonts, see the Add Web Fonts to Search Frontend Theme help article.

Fonts Hosted by a Font Service Provider

Fonts hosted by Google Fonts and Adobe Fonts are free and don’t require a license.

You’ll get a code snippet from the hosting provider that will include both the font assets themselves and font-face declarations for you. Add the font scripts to the layouts > headincludes.hbs file.

Self-Hosted Fonts

These are typically your proprietary fonts and are font files that you upload into Search. Upload these files to the static > assets > fonts folder.

Once you upload your fonts, add font-face declarations for each file or variation that you uploaded (e.g., bold, italic, etc.) to the top of the static > scss > fonts.scss file. The format for font declarations are as follows:

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

Updating Fonts using CSS

Upon completion of adding your custom fonts, they will be accessible to use by adding them to font-family properties in either the answers.scss or fonts.scss (you would typically edit variables in answers-variables.scss but font variables are housed in fonts.scss) files which you learned about in the previous units. You can also read the Change Fonts in Search Frontend Theme help article to learn more.