loading

Web Fonts and Font Hosting| Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

  • What is a web font?
  • How to use web fonts in your Answers experience

What is a Web Font?

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, in that a customer will need to purchase the right to use the fonts on their site.

How to Add a Web Font to your Site

Font files can either be hosted by a font service provider, or you can self-host and upload these files yourself. Common font hosting providers include Google Fonts and Adobe Fonts. The benefit of Google Fonts is that they are all free and don’t require a license; these are often a good alternative if you can’t get access to a customer’s proprietary fonts.

Option 1: For Common Hosting Service Providers

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"> 

In order to be able to use these fonts on any Answers page, we need to load it in the head of each page’s HTML. In your layouts folder, you’ll find a file called headincludes.hbs. Adding scripts here will load those on every single page. Placing Scripts in Head Includes

Option 2: For Self Hosted Fonts

Font File Types

Before we discuss how to upload your font files to your Answers experience, we’ll need to talk about the different font formats we can work with.

Here are some of the font file types you might encounter:

  • TrueType Fonts (.ttf) - not supported in IE11
  • OpenType Fonts (.otf) - not supported in IE11
  • Web Open Font Format (.woff) - supported across all major browsers.

You should use .woff files, as these are compressed for better delivery over poor internet connections, and are generally supported across browser types. If a font isn’t available on a certain browser, that is where the fallback font families you learned in the last unit come into play.

Adding the Font Files

Once you have the .woff files, you’ll upload these into a static/assets/fonts/ folder by hovering over the folder and clicking the ... icon.

Select ‘Upload Existing File’ in the dropdown, and hit ‘Choose Files’ to select the files from your computer. Upload Fonts

Now, you’ll add your font-face declarations to your static/scss/fonts.scss file. Remember the example from the last unit? You’ll need to upload a file for each variation - in this case, regular, bold, and italic. You’ll also need a separate font-face declaration for each of the font files you upload. You can see the src is referring to the filepath of your fonts folder.

@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-regular-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  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;
}

The accepted format types are: “woff”, “woff2”, “truetype” (.ttf extension), “opentype” (.otf extension), “embedded-opentype” (.eot extension), and “svg”.

How to Use the Web Font in your SCSS

Once you’ve added the font to your site, you can use it anywhere!

You can set the font in your answers.scss for all Answers components by setting the --yxt-font-family variable in your static/scss/fonts.scss file:

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

Alternatively, you could target specific classes in your answers.scss file

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

Lastly, there are a few variables in the fonts.scss file that allow you to control the size of the fonts 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 Answers experience.

$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;
}
unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 3

    What are the different ways you can host your web font files?

    Error Success Question 2 of 3

    What are the different ways you can add a font to your site?

    Error Success Question 3 of 3

    Why do you have to add multiple font-face declarations for the same font?

    A Hitchhiker in the making! 🔥

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Splash Loading