This article describes how you can upload and integrate a new font in inCMS. This can be a Google Font (see below), a font you've downloaded, bought or have designed for you.
Upload a font you've downloaded, bought or have designed for you
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 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.
The font is now automatically added to your list of fonts and can be selected the way you normally select fonts: go to Settings -> Design -> Typography in the left menu. Choose the text type for which you’d like to use the new font. Click on the current font name, to open the list of possible fonts. You’ll now see a section ‘Local fonts’ added above the list of ‘System Fonts’. Select the required font and click save.
To change the font of buttons, go to Settings -> Design -> Buttons. Etc etc.
As inCMS automatically uploads the new font into the list of possible fonts, you no longer need to write CSS code for this.
Google Font
Your website connects with Google Fonts (and thus with Google Servers) to display all non-standard fonts correctly. It then loads the required web fonts in the visitors browser cache. If you don’t want this, there are a few options:
1) Choose a non-Google Font (local font or system font)
2) Download and install the Google Font on your website (make it a local font)
If you use a Google font, but you have set the Data Protection settings for fonts to ‘disable’, and you haven’t implemented option 1 or 2 from above, a website visitor will see your website displayed in a default font.
1) Choose a non-Google Font
To choose a non-Google Font: go to Settings -> Design -> Typography in the left menu. For each text type, choose a ‘System 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.
2) Download and install the Google Font on your website (self-hosted)
You can download the Google Font from their webpage https://fonts.google.com (or click the “Open Font Gallery” Link in inCMS, next to the font preview in for example Settings -> Design -> Typography). Then, follow the steps as described in the first part of this article (‘upload a font’).
When you have disabled Google Fonts in the Data Protection Menu, and you select a Google Font, you will get a warning, explaining that Google Fonts have been disabled and that the selected font will not work. This warning also contains a link where you can download the font (zip-file). By clicking the link you will download a file with a woff and woff2-file to your computer. Then, follow the steps as described in the first part of this article (‘upload a font’).
