Loading...

Google Fonts

Google fonts are a sensitive topic when it comes to GDPR. If Google fonts used via the Google server, this must be mentioned in the privacy policy. Furthermore, nobody knows if and how Google tracks data via its fonts.

The safest option is to install Google Fonts locally in the theme. There is a great free online-tool for this: The google-webfonts-helper, which makes it incredibly easy to install these fonts safely.

Install fonts

Example Montserrat

  1. Open google-webfonts-helper
  2. Search for “Montserrat” and choose the styles “regular” and “700”
  3. Copy the generated CSS, paste it in the child-theme /css/scss/_bscore_custom.scss and adjust the path to ../../.
  4. Go back to google-webfonts-helper, scroll down and download the package
  5. Create folder /fonts in child-theme, unzip montserrat-v14-latin.zip and store files in this folder. Font is now installed and can be used
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../../fonts/montserrat-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../../fonts/montserrat-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../../fonts/montserrat-v18-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../../fonts/montserrat-v18-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Use

Use variables to assign the new font in /css/scss/_bscore_variables.scss.

// Fonts
$font-family-sans-serif:    'Montserrat', sans-serif !default;

// Headings & display
$headings-font-weight:      700 !default;
$display-font-weight:       700 !default;

2 Comments on “Google Fonts”

  • Andrew Paterson

    says:

    HI,

    How should the file path look? i have /fonts in child theme root. how about the src: local(”),

    thanks

    • Basti

      says:

      Hi Andrew,

      the generated code from Google Webfonts Helper has this path:

      url('../fonts/
      

      Just change the ../ to ../../:

      url('../../fonts/
      

      Don’t care about the src: local(”)

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information