Search for a font

The first thing to do is of course to find a font that you like, so we will use Google Fonts.

Select a font with at least 2 styles in order to have the 'regular' (400) and the 'bold' (700).

Installation of the font

Once you have found the font you like, go to https://google-webfonts-helper.herokuapp.com/ which will generate the CSS code and the ZIP file to download.

Search for your font and select it to display it.

In step 2, select 'regular' and '700'.

In step 3, copy the CSS and paste it at the beginning of the file /modules/jprestathemeconfigurator/views/css/fonts.css. We will then add 2 lines "font-display: swap;" to improve the Pagespeed score as in this example:

/* montserrat-regular - Latin */

@font-face {

 font-family: 'Montserrat';

 font-style: normal;

 font-weight: 400;

font-display: swap;

 src: url('../fonts/montserrat-v24-latin-regular.eot'); /* IE9 Compat Modes */

 src: local(''),

 url('../fonts/montserrat-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

 url('../fonts/montserrat-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */

 url('../fonts/montserrat-v24-latin-regular.woff') format('woff'), /* Modern Browsers */

 url('../fonts/montserrat-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */

 url('../fonts/montserrat-v24-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */

}

/* montserrat-700 - latin */

@font-face {

 font-family: 'Montserrat';

 font-style: normal;

 font-weight: 700;

font-display: swap;

 src: url('../fonts/montserrat-v24-latin-700.eot'); /* IE9 Compat Modes */

 src: local(''),

 url('../fonts/montserrat-v24-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

 url('../fonts/montserrat-v24-latin-700.woff2') format('woff2'), /* Super Modern Browsers */

 url('../fonts/montserrat-v24-latin-700.woff') format('woff'), /* Modern Browsers */

 url('../fonts/montserrat-v24-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */

 url('../fonts/montserrat-v24-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */

}

In step 4, download the ZIP file and unzip it to the /modules/jprestathemeconfigurator/views/fonts/ directory.

Using the font

Now go to the "Live Theme Configurator", in the general tab "Typography" you will see your new font in the list. Select it, you should see the font change but it will be Arial. You have to make a first save so that the theme configurator regenerates the CSS and includes the new fonts. Once saved you will see your Prestashop store with your new Google fonts!

Sélection de la police de caractère dans le thème Prestashop JPresta