Core
      Back to home
      1. Knowledge Base
      2. Design Tokens
      3. Core

      Fonts

      Add fonts to your site

      You can add fonts to be used throughout your site. Nyla currently supports Google fonts, Typekit, and Custom font files. In order to keep your site fast we suggest adding fewer than 3 or 4 fonts to your site. Each font style needs to be individually added. Please make sure you have the correct licenses to use any fonts you feature on your site.

      If you are designing for Nyla, we suggest to review best practices for designing typography for Nyla in addition to reading this article. 

       
      Adding fonts
      To add a new font, press the + button. Each individual font and font weight weight needs to be individually added to Nyla in order to be referenced in Typography.

      Google fonts

      If you're new to fonts, we recommend starting with Google Fonts -- here's how:

       

      To add a Google font to Nyla, choose Google in the Source section of a new Font. In the font settings, add the font family name that is shown in Google. You can find this name by adding styles, and then pressing on ‘View your selected families’ and looking for the CSS rules to specify families section.

      Google.png

      Typekit

      To add fonts from Typekit to Nyla, you will need to create a Web Project with the desired fonts. Each font and font style needs to be added individually as a reference.
      Typekit.png

      Custom

      To add a custom font to Nyla, upload the version of the font you want to add ( .woff2 preferred, .ttf if that's all you have), as well as completing the information in the font settings.
      Custom.png
       

      Fonts and rich text

      The fonts that have been added to the site will also be used in Rich text. For example, if a font with the name of ‘Avenir’ is added in Bold, Italic, and Regular versions, the rich text will automatically use these fonts when using a default typography style.
      For example if the site has the following fonts:
      • Avenir Regular. font family: avenir, Font weight: 400 - Normal / Regular, Font style: Normal
      • Avenir Bold. font family: avenir, Font weight: 700 - Bold, Font style: Normal
      • Avenir Italic. font family: avenir, Font weight: 400 - Normal / Regular, Font style: Italic
       
      If a typography style called Body regular uses Avenir regular, the rich text will use the bold and italic font files or web references when using rich text styles of bold and italic

      Best practice

      It is best practice to add the least amount of font families as possible. This will help reduce the load time of your site!