SearchLoginTry ShopWired Free

Create your own ecommerce website and start selling successfully with ShopWired today

Create your ecommerce website on ShopWired today.
Start today with 14 days free

Try ShopWired Free

Create your own ecommerce website and start selling successfully with ShopWired today

Create your ecommerce website on ShopWired today.
Start today with 14 days free

Changing your website's font(s)

Back to articles
Theme Customisations - Coding
24th February 2021

Before you proceed:
The following article contains information that requires you to have some prior knowledge about coding in order to correctly implement the proposed change to your theme. If done incorrectly alterations made to your theme’s code can negatively impact your website causing visual and performance issues. Therefore, we strongly recommend that you only undertake this effort if you are completely confident that you know what you’re doing. If you have no coding experience at all, aren’t entirely comfortable following the instructions in this article or if you simply don’t understand the instructions then we recommend you instead contact our partners, Coding Masters, who will complete the work for you for a set fee.

Before you follow the guidance below for changing your font you will want to have already picked a font (or fonts) for your website. If you haven't already found a font then a great place to look is the Google font library. Alternatively, you can peruse many other font websites that exist which offer free or premium fonts. If you find a font on one of these websites you should download the font file that you want to use.

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.

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).