If you use Prestabuilder editor you already know that it is easy to add many custom Google Fonts into your theme in a few clicks.

However, the editor doesn't support ALL fonts that Google has to offer. Or maybe you use some 3rd party theme.

Here are the steps how you can use any Google Font manually.

Select your font on Fonts.google.com

Go to Fonts.google.com and choose the font you like. Click on the PLUS icon to add the font into the list of your selected fonts.

 

Click at the black bar at the bottom ("Family Selected"). Soon you will need those two codes:

  1. HTML code that you will need to insert into the header of your theme
  2. Name of the font-family that you will use in your CSS files

Edit head.tpl and theme.css in your theme

First, we will load the new font to your theme. To do that open this file:

  • themes/your_theme/templates/_partials/head.tpl

Insert the HTML code from above into the TPL file.

Editing of theme.css is not that straightforward. It depends where you want to apply this font. Let's assume you want to use this new font for the main titles of your eshop.

Open:

/themes/your_theme/assets/theme.css

and edit it by adding "font-family" code that was generated for you by Fonts Google.

It might be also a good idea to add "!important" at the end to make sure that our style will not be overridden by any other settings in the CSS.

Check the results

Now you should be able to go from this:

To this:

If you don't see any changes make sure to clear the cache of your eshop and the browser to reload all changes.


Andrej Staš

Andrej is a Prestashop enthusiast. He started by developing his own themes and then formed the idea of creating Theme Maker. He enjoys finding ways to make his life simpler, and that is the philosophy he incorporates into all his projects. Andrej is also interested in WordPress, Amazon FBA, drop shipping, studying languages, and reading books.

2 Comments

Tim Bugg · 5 years ago

Hi Andy, i am trying to change the defaul font for a theme to one not with google so i followed the blog you sent me. https://www.balbooa.com/knowledgebase/32-documentation-faq-joomla/176-how-to-add-custom-font-to-website-through-fontface. created the files which i copied to my server in a specific location and then added the code with the references to theme.css. i am struggling with what i need to change in theme.css to set my default font to the new one.

    Andy · 5 years ago

    Hi Tim, I replied you on your private message :)

You must be logged in to post a comment.