Unfortunately, this guide does not work. “Invalid property value” is what Firefox tells me after implementing. All the work for nothing.
Still publishing this post for myself in case I try to repeat or improve.
Locally hosting fonts is somewhat more complex than using google fonts.
However, the advantage is that you don’t rely on the google server, you can potentially skip a phrase in your privacy policy, and for some people it may be important that also in mainland China, or any other place where Google services may not be accessible, the fonts will still be displayed.
This guide is made based on the following setup:
- I used google webfonts helper and therefore used the font files from Google. To my knowledge this is legit use of google fonts as per their licence terms.
- The classic theme is used
- I put the fonts into the same folder where the stock fonts are stored.
- Prestashop Version 1.7.4.4 – older or newer versions may have a different structure.
Of course you can do things differently, as you wish. In that case, all you have to do is adapt the paths, and the ways to get hold of code, to your ways of working.
Here are the steps:
- Download the files from google fonts. Use google webfonts helper.
- Put the font files into a good directory in your prestashop installation. If you have a different path, then you must adapt that path in the CSS code. To follow this guide, just put the font files here: /themes/_libraries/font-roboto/fonts/
- Add custom CSS code. The code is already pre-generated by google webfonts helper. The code goes into this file: themes/classic/assets/css/custom.css
Now to the details.
Two points require specific attention in the CSS code.
- Path of font files
- Choice of tags / text types for which the new font shall be applied.
Google webfonts helper will have provided CSS code which may look like this:
/* roboto-300 – latin */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 300;
src: url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.eot’); /* IE9 Compat Modes */
src: local(‘Roboto Light’), local(‘Roboto-Light’),
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.woff’) format(‘woff’), /* Modern Browsers */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.svg#Roboto’) format(‘svg’); /* Legacy iOS */
}/* roboto-700 – latin */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
src: url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.eot’); /* IE9 Compat Modes */
src: local(‘Roboto Bold’), local(‘Roboto-Bold’),
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.woff’) format(‘woff’), /* Modern Browsers */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.svg#Roboto’) format(‘svg’); /* Legacy iOS */
}
Make sure the path correctly leads to the font files you have uploaded to the server. In this example, the path points one level up from the reference document, then into the CSS directory, and then to the font file. This path is the same syntax that is also used in theme.css, which is the original CSS file which comes with the classic theme. That file sits in the same folder, therefore the same path structure applies.
Once you are confident the path is correct, choose the tags for which you want to apply which fonts.
For example, maybe you want all paragraph text to use roboto with weight 300. And if you want the headers to use the roboto font with weight 700, then you want to add the tags (font faces) h1,h2,h3,h4,h5,h6, to that font. The code will look like this:
/* roboto-300 – latin */
p {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 300;
src: url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.eot’); /* IE9 Compat Modes */
src: local(‘Roboto Light’), local(‘Roboto-Light’),
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.woff’) format(‘woff’), /* Modern Browsers */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.svg#Roboto’) format(‘svg’); /* Legacy iOS */
}/* roboto-700 – latin */
h1,h2,h3,h4,h5,h6 {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
src: url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.eot’); /* IE9 Compat Modes */
src: local(‘Roboto Bold’), local(‘Roboto-Bold’),
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.woff’) format(‘woff’), /* Modern Browsers */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.svg#Roboto’) format(‘svg’); /* Legacy iOS */
}
I’m sure you got the idea?
Test the results, inspect the resulting HTML in your browser and add or remove any font faces that you think should go with those specific fonts.
I identified the following type-face tags which I used for the fonts. My choice may not be the smartest, but it seemed to yield results.
For the lighter font:
p, div.aeuc_footer_info, td, .no-account, .breadcrumb, .tax-shipping-delivery-label, .header-nav, .label, label, .footer-container, .form-control-label, .radio-inline, .form-control-comment, .step-edit, .address-footer, textarea, div.card-block, span.carrier-delay, .alert, .alert-danger
For the bold font:
b, h1, h2, h3, h4, h5, h6, .b, .h1, .h2, .h3, .h4, .h5, .h6, .nav-link, strong, .product-actions
An easier way may be:
define for the lighter font:
body
(this sets all fonts anywhere on the site to the font defined behind)
and then define the bold ones as indicated before
b, h1, h2, h3, h4, h5, h6, .b, .h1, .h2, .h3, .h4, .h5, .h6, .nav-link, strong, .product-actions
This will first set all fonts to the light font, and then override only the bold ones with the stronger font.
The resulting code would be this:
/* roboto-300 – latin */
body {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 300;
src: url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.eot’); /* IE9 Compat Modes */
src: local(‘Roboto Light’), local(‘Roboto-Light’),
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.woff’) format(‘woff’), /* Modern Browsers */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-300.svg#Roboto’) format(‘svg’); /* Legacy iOS */
}/* roboto-700 – latin */
b, h1, h2, h3, h4, h5, h6, .b, .h1, .h2, .h3, .h4, .h5, .h6, .nav-link, strong, .product-actions {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
src: url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.eot’); /* IE9 Compat Modes */
src: local(‘Roboto Bold’), local(‘Roboto-Bold’),
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.woff’) format(‘woff’), /* Modern Browsers */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘/themes/_libraries/font-roboto/fonts/roboto-v18-latin-700.svg#Roboto’) format(‘svg’); /* Legacy iOS */
}
This goes into custom.css, and you are done.