This article describes how you can upload and integrate a new font in inCMS. This can be a font you've downloaded, bought or have designed for you. 

Sometimes it's preferred to have your website disconnected from Google Fonts. To do so, follow the same steps or choose a non Google Font font (see last paragraph in this article).


Download / get font

Get the font-files. Usually it's sufficient to have the woff2-file. This file will work on all modern browsers. Older browser-versions might need other file-types. It's not sufficient to have just a ttf-file. This file is required to install a font on your computer, but it won't work for your website. 

Note: there are free online font-file converters that can convert a ttf-file in other font-files, but most of them will corrupt the file and then it won't work anymore. 


Upload font in inCMS

Upload the file at the same place as where you upload images (Go to Data in the menu on the left). 

Note: upload only files, and not a folder.


Add CSS Code

In CSS you need to add two parts of code (See Settings -> Design -> CSS in the menu on the left). The first part defines the font-family. The second part defines for which types of text this font should be used.


Example code part 1:

@font-face {
font-family: 'FONT NAME';
font-style: normal;
font-weight: 400;
src: url('../filebrowser/FONTFILENAME.XYZ');
}


Replace FONT NAME with the font name. Adjust the input for style ('normal' in this example) and weight ('400' in this example) if needed. Replace FONTFILENAME.XYZ with the font filename including the extension. Add several lines with url('../filebrowser/FONTFILENAME.XYZ'), separated with commas, if you'd like to define files with different extensions.


Example code part 2:

h1{font-family: 'FONT NAME';}


Replace FONT NAME with the font name. Define this for all types of text for which you'd like to use the font (header 1, header 2, ..., paragraph, Link, ...).


Now you can test if the font is working. If it's not: first logout from the website. Then refresh your browser. The font should now work, also on for example a mobile device and a Chrome Incognito window.


Disconnect from Google Fonts

When you use a Google Font, your website will connect with the Google Server and load the required web fonts in your browser cache. If you don't want this to happen, you have to:

1) Choose a non-Google Font

or

2) Download and install a Google Font (as described above; make sure to download a woff2-file)


To choose a non-Google Font: go to Settings -> Design -> Typography in the left menu. For each text type, choose a font from the list before the --------- line. All fonts below this line are Google Fonts. You will need to do this in all menus which define the fonts used (so also other menus than Typography). When you do this, the connection with Google will automatically be disconnected.