Web Fonts are fonts that are not already installed on a user’s operating system, but instead are hosted on the web and downloaded by the browser in order to use them. These give you the flexibility of using whatever font you choose, as long as you provide them as font files (either a URL or a filepath). These fonts are often licensed, which means that a customer will need to purchase the right to use the fonts on their site.

There are two types of fonts you can add to Search:

1. Fonts hosted by a font service provider, such as Google Fonts and Adobe Fonts, which are free and don’t require a license.
   1. You’ll get a code snippet from your hosting provider that will include both 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">

2. Self-hosted fonts - typically your proprietary fonts, if applicable.
   1. These are font files that you upload into Search.
   2. 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)

To add web fonts to your site:

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. Add the fonts to your Code Editor. This process differs depending on how the fonts are hosted. Follow the steps below accordingly:
   • Fonts hosted by a font service provider
     1. Click on the layouts folder.
     2. Click on the headincludes.hbs file.
     3. Add your desired font scripts to the file.
   • Self-hosted fonts
     1. Click on the static folder.
     2. Click on the assets folder.
     3. Hover over the fonts folder, click on the three dots (…) that appear, and click on Add File in the drop-down menu. A dialog box appears.
     4. Select Upload Existing File in the dropdown.
     5. Click Choose File and select the file from your computer. Then click Add File.
        • If you have more than one file that you want to add, repeat steps c through e. Note that you will need to upload a file for each font variation (e.g., regular, bold, and italic).
     6. Click on the scss folder under the static folder.
     7. Click on the fonts.scss file.
     8. Add your desired font-face declarations to the top of the file.
        • You’ll need to add a font-face declaration for each variation/file that you upload — in this case, regular, bold, and italic.
        • The src refers to the filepath to the file(s) you just 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;
}

5. Apply your new font to your Search experience. See the Change Fonts in Search Frontend Theme help article to learn more.