There are two ways to add fonts to your site. Either upload a custom webfont or choose from the vast selection of free Google Fonts using our new Font record functionality. The following information will guide you through the necessary steps.
How to add a new font to your CMS's 'Style' settings
- First, log into your website CMS and enable the 'Font' record by opening Settings > General > Modules > tick 'Fonts' and 'Save'.
- Next, return to your CMS homepage > Settings > Fonts.
- Click 'New record' and here you can add a Google Font or a custom font. See below for further instructions.
Add a Google Font
All Google Fonts listed here are offered free of charge from our Google Fonts API.
- Click the 'Google' button to begin.
- Choose your Font preference.
- Choose your 'Regular font' and 'Bold font' (optional) variants, using the previews to see how they will appear on your site.
- Enable the visibility and click 'Save'.
-
Google fonts will display in the CMS > Settings > Styles > Fonts preference menus (at the bottom) with your font variants in brackets beside the font name. This allows you to upload multiple fonts of the same font name, but with different font variants. Select them here to update your site's fonts.
Eg: Google Font 'Aleo (700, 700)' and 'Aleo (300, 300)'.
Add custom fonts
Fonts can be added to your website free of charge by uploading a pre-purchased webfont.
First, what is a webfont and what file types do I need?
A webfont is a specially tuned font for use on websites and requires specific licenses to use online. This makes them different from desktop fonts, which are designed to be installed on your computer for use with applications such as Microsoft Word or Adobe Photoshop.
Desktop fonts are typically .otf files and these cannot be uploaded as custom fonts in your Artlogic CMS. The webfonts required to be uploaded to your CMS are .woff, .woff2, and Ttf files.
Steps
- Choose 'Upload webfont' to begin adding your custom font, give it a name and press 'Save'.
Warning: By uploading a font you confirm that you have a valid webfont licence in place, which contractually states that you have the right to use any of the font files uploaded in this record.
- For the 'Regular' variant, upload your corresponding .woff, .woff2, and Ttf files. These cannot be .otf files (desktop font file types). You can add an optional 'Bold' font variant, which will be used when the page displays bold fonts, otherwise the browser will fall back to a generic 'Bold' font-weight, which mimics a bold version of the font.
- Choose whether to override the font style:
- Enable the visibility and click 'Save'.
- To add more variants or entirely new fonts, return to your Fonts record screen.
- Your uploaded fonts will display in the CMS > Settings > Styles > Fonts preference menus (at the bottom). Select them here to update your site's fonts.
How to add more weights and styles
If you want to use more than one style or weight, you should create multiple font records, so that you can choose these different styles/weights in the font dropdown menu.
Following the steps above, upload them as separate font records.