Changing your website's font(s)
This help guide assumes that you have already chosen new font(s) for your website. If you need further information about choosing new fonts then please click here.
Online services like Google Fonts will provide you with code that you need to include in your theme's files to reference the font files from the server they are located on.
If you're using Google Fonts, the code will look like the example below.
<link href="https://fonts.googleapis.com/css?family=Barrio" rel="stylesheet">
This code will need to be added to the <head> section of your website. To add it there, you'll need to use the page editor and edit the master.twig file (located in the 'views/templates' folder).
If you don't have a link for the font files (you may have the files for the font on your computer somewhere), you'll need to convert the files to the necessary format (using a tool like this one) and upload them to a server somewhere. You'll then need to perform a similar process to reference the font files on your theme.
Once you've added in the reference to the font files, you'll need to change references to the font you are replacing (the old font) to the font you are replacing it with (the new font).
To do so, you'll need to edit the CSS/LESS file(s) of your theme.
You'll need to know the name given to the font family for the old font, in our example it's alternate-gothic.
Where you've obtained the new font from, you'll be provided with a new font family name. In our example it's Barrio.
You'll need to go through the CSS/LESS files and replace occurrences of the old font family name, with the new one, e.g.
#content h1 {
font-family: 'alternate-gothic', Arial, Helvetica, sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 1;
margin: 0;
font-size: 44px;
}
becomes...
#content h1 {
font-family: 'Barrio', Arial, Helvetica, sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 1;
margin: 0;
font-size: 44px;
}
When editing a file using the page editor, you can use CTRL+F to search through the file for a string of text (CMD+F if on a Mac).
You can also use CTRL+G to go to the next occurrence and CTRL+SHIFT+G to go to the previous (use CMD instead of CTRL if on a Mac).
Font sizes
Not all fonts are sized the same. 12px of Alternate Gothic font is smaller than 12px of Barrio font. You may need to adjust the font files on your theme accordingly to suit the new font's requirements (particularly for text placed inside of buttons).