Before you proceed: |
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).
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).
EcommerceFrom 28 June 2025, new EU regulations will require all consumer-facing webshops to meet certain accessibility standards. Known as the European Accessibility Act (EAA), the goal is to make online stores...
B2B EcommerceNavigating the complexities of B2B purchasing requires an in-depth understanding of buyer behavior, which has evolved significantly over recent years. Companies today must adapt to these changing dynamics...
MarketingGoogle Shopping is a powerful platform that lets online stores showcase their products on both the Google results page and Google Shopping tab. This unique advertising opportunity helps brands put...
Ecommerce business managementThe success of your ecommerce store depends on more than just top-notch products and savvy marketing. According to a study by Salesforce, 88% of customers said their whole experience with a business is...
Ecommerce business managementWhen Magento was released back in 2007, the appeal of an open-source ecommerce platform quickly captured the attention of businesses wanting complete control over their online store. However, for...
Ecommerce business managementArtificial intelligence (AI) is revolutionizing the ecommerce landscape.By 2030, the AI-enabled ecommerce market is estimated to reach $16.8 billion, growing by a rate of 15.7% CAGR in the next 8 years....
EcommerceIn the ever-evolving landscape of ecommerce, the success of your business hinges not only on the products you sell but also on the robustness of your ecommerce platform.As we navigate through an era where...
See why ShopWired is one of Europe's favourite ecommerce platform and start building your ecommerce website today.
No obligation, no credit card, no commitment, no contract
