Fonts

Infradox XS websites support the use of standard, external and selfhosted fonts. 

Recommended reading

• Infradox XS customisation
• Using the code editor
• Using custom CSS
• How to use Google icons buttons

Using standard fonts and/or Google fonts

Click on Site configuration in your dashboard and then click on Website style in the bar on the left. You’ll find different sections that let you select the fonts you want to use. If you want to use Google fonts then open this section before you select the fonts that you want to use. You can enter the names of up to 3 Google fonts. The system will automatically add links to link the fonts to the head of your HTML pages. For example: 

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

The Google fonts for which you have entered the names will automatically appear in the font selection dropdown boxes. E.g. to specify the font for the body text.

Including external fonts by adding code to the includes file

In addition to – or instead of – the method described above, you can also include fonts by adding them to the includes file in the Code editor.
Click on Code editor in your dashboard and then select Includes (51) in the dropdown box at the top of the editor. Insert the link for your font (see example above) and click Save. You can add as many fonts as you want. For an overview of the Google fonts that you can use and instructions, go here: https://fonts.google.com.
For example, if you have included Montserrat (below)

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

you can use the following CSS rules to specify these families:

font-family: 'Montserrat', sans-serif;

Working with self hosted fonts

If you don’t want to use externally hosted fonts, then you can upload your font files via Site configuration, Website files. Then open the section Self hosted fonts. You can upload all common font formats such as ttf, eot, otf, woff, woff2 and svg.
Once you have uploaded your files, you’ll need to add CSS to include the fonts in your HTML pages. You can use this website: Google webfonts helper to select and download your fonts, and to get the CSS that you’ll need to include.
Example CSS for the self hosted font “Abel”:

/* abel-regular - latin */
@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: url('../siteowner/fonts/abel-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Abel Regular'), local('Abel-Regular'),
       url('/siteowner/fonts/abel-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/siteowner/fonts/abel-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/siteowner/fonts/abel-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/siteowner/fonts/abel-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/siteowner/fonts/abel-v7-latin-regular.svg#Abel') format('svg'); /* Legacy iOS */
}

Note that the path to your self hosted fonts is /siteowner/fonts.
You can paste the CSS in the Code editor (select Custom CSS (2) in the Code editor dropdown). But you can also add it to a CSS file that you can upload via Site configuration, Website files, HTML pages and CSS.