Menu Close

Get Support From ShopWired Close

All Systems Operational

Subscribe To Updates
Prefer To Live Chat? Chat directly with ShopWired support Quickest response time

Prefer To Phone?

Call us on 0330 111 2024 (free from landlines and mobiles)

Available 9.30am to 5.30pm Monday to Friday


Send A Message
Response within 24 hours

Menu Close

Menu

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/other' 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).