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 — for example, the search bar icon, the title bar icons, or icons that appear on your cards. 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. Upload the 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.

Add an Image File to 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 assets folder.
6. Hover over the images folder and click on the … icon.
7. Click Add file in the drop-down menu.
8. Upload an image file to your /static/assets/images folder. Note that you must place images in this specific folder path, otherwise they will not be accessible for use on your site.
   • Select Add a New File and name it. This will create a blank file for you to insert code into.
   • Select Upload an Existing File, then click Choose File to upload an image from your device.
9. Click Add File.
10. Your image file will appear under the images folder with a path of /static/assets/images/filename.extension. You can use this wherever the library is expecting an image URL. Below is an example of referencing a custom icon replacing the Search Bar magnifying glass:

"SearchBar": {
  "placeholderText": "Search",
  "customIconUrl": "static/assets/images/magnifying_glass.svg"
}

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.

Not all operating systems automatically have all fonts downloaded, so you 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. There are two types of fonts you can add, and the way you add them differs.

Type 1: 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. This will be in the form of a stylesheet — referenced like below, with the href being the component that references the external fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&display=swap">

Add the font scripts to the layouts > headincludes.hbs file.

Steps:

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 layouts folder.
5. Click on the headincludes.hbs file.
6. Add your desired font scripts to the file.

Type 2: Self-Hosted Fonts

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

The accepted format types are:

• WOFF (Web Open Font Format) — Recommended, as these are compressed for better delivery over poor internet connections and are generally supported across browser types.
• WOFF2
• TTF (TrueType)
• OTF (OpenType)
• EOT (Embedded OpenType)
• SVG (Scalable Vector Graphics)

Steps:

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, then the assets folder.
5. Hover over the fonts folder, click the three dots (…), and click Add File. A dialog box appears.
6. Select Upload Existing File in the dropdown.
7. Click Choose File and select the file from your computer. Then click Add File.
   • If you have more than one file, repeat steps 5–7. You will need to upload a file for each font variation (e.g., regular, bold, italic).
8. Click on the scss folder under the static folder.
9. Click on the fonts.scss file.
10. Add your font-face declarations to the top of the file. You'll need a declaration for each variation/file you uploaded. The src refers to the filepath to the file you uploaded to your fonts folder:

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

Apply 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 files.

To update the font for all Search components:

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, then the scss folder.
5. Click on the fonts.scss file.
6. Add the font name to the beginning of the --yxt-font-family variable:

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

To target specific classes:

1. Follow steps 1–4 above, then click on the answers.scss file.
2. For the class you would like to target, use font-family and include the web font name:

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

Font Properties Reference

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 pulls all the properties of a font together. You define the font-face for every variation of a font you want to use in the fonts.scss file.

For the below example, Roboto Mono is defined 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

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. Note: you would typically edit variables in answers-variables.scss but font variables are housed in fonts.scss.

$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;
}