Application assets

You can add assets that your app requires, such as fonts, in the public directory of your theme. For example, suppose we want to use the Abril Fatface font from Google Fonts to make our website look awesome and slightly harder to read.

We can use google-webfonts-helper or a similar tool to download the woff-formatted fonts from Google Fonts. Copy them to a new public/fonts directory so that we get this structure:

$ ls public/fonts/
abril-fatface-v12-latin-regular.woff  abril-fatface-v12-latin-regular.woff2

You can verify that these assets are now served at http://localhost:3000/fonts/abril-fatface-v12-latin-regular.woff. However, they are still not imported in our styles. To fix this, we will create a new abstract style helper file (adapted from css generated by google-webfonts-helper):

style/base/_font.scss
/* abril-fatface-regular - latin */
@font-face {
    font-family: 'Abril Fatface';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('/fonts/abril-fatface-v12-latin-regular.woff2') format('woff2'),
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    url('/fonts/abril-fatface-v12-latin-regular.woff') format('woff');
}

Now, we need to override style/main.scss to make sure it also imports our newly-createdfont file:

style/main.scss
// [other imports...]
@import './base/font';

In addition, we will need to assign this font to some elements on the page. Since the ScandiPWA theme uses the $font-muli variable whenever a font is needed, a "quick hack" would be to change the value of this variable:

style/abstract/_variables.scss
// other variables, copied from the source style file
$font-muli: 'Abril Fatface', cursive;

This solution seems a bit ugly, because the name of the variable is now a bit misleading (it used to refer to the Muli font). However, we have successfully overridden the fonts in our app: