Follow

Using custom fonts in standard template designs

This article looks at how to use custom fonts to customise the designs of Candidate, User or Agency portals. We are also only focusing here on either free fonts or fonts which do not require any other kind of authorisation/authentication to be used, as some font-authentication methods for paid-for fonts may not be supported.

There are two ways in which to use custom fonts in clients. By far the simplest/quickest way is to reference an online font repository, such as Google fonts. The alternative requires that all the individual font files be uploaded as assets to the "Fonts" folder) and then custom CSS is added to reference all the font asset files. Both options are detailed in this article.

N.B. Configuration of custom fonts is something only authorised partners and our support or configuration teams may do for you, as access to the full system configuration tool-kit is required.

Option 1 - the easy way

  • Go to https://fonts.google.com/ and find the font you want. N.B. Quite a few "paid for" fonts have a free alternative - just do a Google search to see what other people recommend.

    In the example below, we've searched for a font called "Roboto" (top-right) and you can see a number of fonts have been returned in the search



  • Click the '+' icon for the font you want and your selected font will appear at the bottom of the screen as shown below


  • Expand the panel at the bottom and select the @IMPORT option to view the required reference and styles to use in your CSS as shown below



  • Copy the @import url('https://fonts.googleapis.com/css?family=xxxxxxx'); bit and paste this at the top of the Custom CSS box on System Builder Design page (Design > Content) and then use the line of CSS given in the screenshot above to set the new font for the "body" style as shown below

    @import url('https://fonts.googleapis.com/css?family=Roboto');

    body { font-family: 'Roboto', sans-serif; }




  • All fonts used in the system cascade from the body style in all the standard templates, so this will set the new font to be used throughout. Obviously, you may target specific other styles with specific fonts as required, e.g. heading styles for h1, h2, h3 or fonts used in the navigation menus.

Other online font repositories are available and the process should be similar, provided no authentication is required to use the font(s) in question.

A small caveat...

There is one caveat to the above approach - it requires the the font repositories you are using are accessible and reliable. e.g. In the example above, if Google decide to delete the Roboto font or the google font API goes down, a client's site would not be able to pull in the required resources to display the fonts. Option 2, detailed below, avoids this problem as all the font files would be stored locally.

Option 2 - the harder/more time-consuming (but in some ways better) way

  • Obtain all the required font files from the client and upload each file individually into the fonts folder in Design > Assets > fonts
  • Each font or font variety (e.g. normal v. italic v. bold) will usually have several different files, e.g. .eot, .woff, .ttf, .svg - Make sure you upload all the files
  • Now you need to add references to all the font files using the {!System.FrontEndUrl} merge field in the Custom CSS box in System Builder (Design > Content) - see example below for a font called "MyFont" with a few different versions of it (different font weights and font styles)
  • Finally add an appropriate line(s) or CSS to reference the fonts as required - see also below, where the defined font is used for body, h1, h2, h3, legend and .page-header

    @font-face {
    font-family: 'MyFont';
    src: url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Light-webfont.eot');
    src: url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Light-webfont.eot?#iefix') format('embedded-opentype'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Light-webfont.woff') format('woff'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Light-webfont.ttf') format('truetype'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Light-webfont.svg#MyFontLightRegular') format('svg');
    font-weight: 200;
    font-style: normal;
    }
    @font-face {
    font-family: 'MyFont';
    src: url('{!System.FrontEndUrl}Assets/Fonts/MyFont-LightItalic-webfont.eot');
    src: url('{!System.FrontEndUrl}Assets/Fonts/MyFont-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-LightItalic-webfont.woff') format('woff'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-LightItalic-webfont.ttf') format('truetype'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-LightItalic-webfont.svg#MyFontLightItalic') format('svg');
    font-weight: 200;
    font-style: italic;
    }
    @font-face {
    font-family: 'MyFont';
    src: url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Regular-webfont.eot');
    src: url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Regular-webfont.woff') format('woff'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Regular-webfont.ttf') format('truetype'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Regular-webfont.svg#MyFontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    @font-face {
    font-family: 'MyFont';
    src: url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Italic-webfont.eot');
    src: url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Italic-webfont.woff') format('woff'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Italic-webfont.ttf') format('truetype'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-Italic-webfont.svg#MyFontItalic') format('svg');
    font-weight: normal;
    font-style: italic;
    }
    @font-face {
    font-family: 'MyFont';
    src: url('{!System.FrontEndUrl}Assets/Fonts/MyFont-SemiBold-webfont.eot');
    src: url('{!System.FrontEndUrl}Assets/Fonts/MyFont-SemiBold-webfont.eot?#iefix') format('embedded-opentype'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-SemiBold-webfont.woff') format('woff'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-SemiBold-webfont.ttf') format('truetype'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-SemiBold-webfont.svg#MyFontLightBold') format('svg');
    font-weight: bold;
    font-style: normal;
    }
    @font-face {
    font-family: 'MyFont';
    src: url('{!System.FrontEndUrl}Assets/Fonts/MyFont-SemiBoldItalic-webfont.eot');
    src: url('{!System.FrontEndUrl}Assets/Fonts/MyFont-SemiBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-SemiBoldItalic-webfont.woff') format('woff'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-SemiBoldItalic-webfont.ttf') format('truetype'),
    url('{!System.FrontEndUrl}Assets/Fonts/MyFont-SemiBoldItalic-webfont.svg#MyFontLightBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    }

    body, h1, h2, h3, legend, .page-header { font-family: 'MyFont', arial, sans-serif; }

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk