Authoring
      Back to home
      1. Help Center
      2. Tips and tricks
      3. Authoring

      Custom CSS: Custom fonts

      How to use custom fonts in your EdApp lessons.

      So you’ve got your own font that you would like to use in your EdApp lessons. That’s great! But there are a few aspects to consider first.

      1. Make sure the font is publicly available first

      In order for a font to display in EdApp, it needs to be hosted online, somewhere it can be called from. 

      For example, if a user is accessing a file on their home computer but does not have the required font installed, the document will typically display in Times. If you download that font file and then reopen the document, then the file will often display in the intended font. 

      When it comes to EdApp lessons, it will be rare that your learners will have your custom font saved to their mobile device. Therefore it needs to be referenced from an online source, accessible by all of your users, no matter which device the learners are completing their training from. 

      2. Provide a secondary font

      Some browsers and/or devices may block your custom font, so it’s important to have a fall back, open source, font listed too.

      Check out our custom CSS cheat sheet guide to learn more about custom CSS in EdApp. 

      Please consider if using a custom font is absolutely required to deliver your training. Using an open-source font such as a google font will often yield the same effect. Custom fonts can sometimes have an impact on the load performance of your training materials as the lesson needs to find and reference the external URL each time the lesson opens. Additionally, some slides won’t display as nicely when you try to enforce a custom font.

       

      How to add custom fonts using @font-face 

      The @font-face CSS rule is the most common approach for adding custom fonts to a website. And the same logic can be applied to your EdApp lessons. 

      Head to the branding tab of your course to locate the custom CSS section. Once you're there, insert the following formatting into the custom CSS text box. 

      @import url (https://(where your font is hosted); 


      /*Font*/


      @font-face {

      font-family: "CustomFont";

      src: url("https://yoursite.com/css/fonts/CustomFont.eot");

      src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),

      url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),

      url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg");

      }


      body {

        font-family: 'Font Name’, Google Font name, sans-serif;

        font-weight: normal;

      }


      h1 {

      font-family: 'CustomFont', Arial, sans-serif;

      font-weight:normal;

      font-style:normal;

      }

       

      Example:

      @import url (https://fontsabsolutcom-tac.vercel.app/absolut-sans/v1/absolut-sans.css/);


      /*Font*/


      @font-face {

          font-family: 'Absolut Sans';

          src: url('https://fontsabsolutcom-tac.vercel.app/absolut-sans/v1/absolut-sans-regular.woff2') format('woff2'),

               url('https://fontsabsolutcom-tac.vercel.app/absolut-sans/v1/absolut-sans-regular.woff') format('woff');

      }



      body {

        font-family: 'Absolut Sans', Arial, sans-serif;

        font-weight: normal;

      }


      .block-h-sm {

        font-family: 'Absolut Sans', Arial, sans-serif;

        font-weight: normal;

      }


      /*Buttons*/


      …

       

      Resources