How to add any Google Font into your Prestashop 1.7 theme

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.