Skip to content

How to change fonts in Prestashop 1.7 with Google Fonts

To use google fonts, there are three steps.

  1. Choose the font from google and get the snippets
  2. Modify head.tpl
  3. Add custom CSS code

Now in sequence:

  1. Choose the font from google and get the code snippets. They look like this
    1. Embed font: <link href=”https://fonts.googleapis.com/css?family=Kumar+One+Outline” rel=”stylesheet”>
    2. Specify in css: font-family: ‘Kumar One Outline’, cursive
  2. Open the file
    themes/classic/templates/_partials/head.tpl
    (assuming you are using the classic template, and want to modify that directly, otherwise of course choose the template you want to modify)
    In the file head.tpl, add the “embed font” snippet from google (1.1. above)
    It could look roughly like this:
  3. Open the file
    themes/classic/assets/css/custom.css
    Here, you need to know which kind of text you want to modify. I will use an example where standard paragraph text shall be formatted with this new font. To do this, I just type p{}, and inside the brackets, I paste the text from google fonts. This time, it is the second snippet (see 1.2. above) which specifies the font family. Full tag looks like this: p{font-family: ‘Kumar One Outline’, cursive;}.
    If this is the first change you have done to custom.css, then this is also the only tag in this file. Looks like this:

 

Done!

You just changed the font for all paragraph text into something totally ridiculous! I chose this font just to make the change very very obvious, impossible to miss. The first thing you want to do is choose a different font. Off you go.

Oh, if you didn’t see any changes, please clear the cache in prestashop backoffice -> advanced parameters -> performance, and also in your browser.

 

For a more realistic CSS snipped, this is what I have used.

body {
font-family: ‘Roboto’, sans-serif;
}

b, h1, h2, h3, h4, h5, h6, .b, .h1, .h2, .h3, .h4, .h5, .h6, .nav-link, strong, .product-actions {
font-weight: 700;
}

 

Obviously, for this to work, also the roboto font from google must be chosen.

Example for head.tpl:

<link href=”https://fonts.googleapis.com/css?family=Roboto:300,700” rel=”stylesheet”>

 

Unfortunately, in my case special characters were not displayed correctly in Firefox. I have found no solution for that. Reverting to original after several hours of work with webfonts and locally hosted fonts.