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.
Who can use this feature?
To find out if this feature is included in your plan please visit this page or get in touch with our team on hello@artlogic.net to request further information.
If you signed up to Artlogic before July 2023 you can visit this page to view our previous plans. Should you have further questions please contact our Support team on support@artlogic.net.
Fonts currently supported by the CMS
The website CMS supports the following fonts as standard:
AL Sans
Alamarai
Arial
Arial Bold
Avenir
Avenir Heavy
Barlow
Barlow Condensed Medium
Barlow Heavy
Bebas Neue
Bellafair
Cairo
Cinzel
Courier New
Crimson Text
DM Sans
EB Garamond
Fira Sans Condensed
Garamond
Gill Sans
Josefin Sans
Josefin Sans Light
Jost
Lato
Lora
Lora
Markazi Text
Merriweather
Merriweather Light
Montserrat
Montserrat Sans
Muli
Nanum Gothic
Nanum Myeongjo
Noto Sans KR
Open Sans
Otto
Overpass
Playfair Display
Proxima Nova
PT Serif
Quicksand
Quickstand
Raleway
Roboto
Roboto Condensed
Roboto Condensed Light
Roboto Light
Roboto Mono Light
Roboto Slab
Sansita
Source Serif Pro
Spartan
Spartan Heavy
Times New Roman
Work Sans
To set a particular font for the header, body, and/or navigation text, navigate to Settings > Settings > Styles > Font and click into the relevant dropdown menu, and select the font you wish to use.
How to add a new font to your CMS's 'Style' settings
- First, log into your website CMS and navigate to Settings > Settings > Styles > Fonts > Click Manage 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.