@rainmakerdigital/nuxt-google-fonts v1.0.6

Google Font Loader for VISTA.canvas 2.0

Introduction

This project provides a custom solution for the management and downloading of Google web fonts.

Google's own webfont CSS ironically fails on Google Lighthouse as the fonts are blocking and prevent text from showing until the font has been loaded.

Whilst sophisticated font-loader scripts can be used these require more work at the CSS level particularly if wide browser coverage is required.

However another easier but less covered solution is to make use of the 'font-display' CSS directive to instruct the browser how to behave whilst fonts are loading.

Sadly given that this is a Lighthouse requirement (and one would assume based on Google best practices) Google themselves do not implement these in their own stylesheets.

Thus this module seeks to address and correct that behaviour.

Installing

The component can be installed using npm and sourcing from rainmaker's private repository.

npm i @rainmakerdigital/nuxt-google-fonts

Usage

Configuration is fairly simple requiring only to specify the module for loading and by passing an array of font families and weights to the module as follows:

modules: [
    ["@rainmakerdigital/nuxt-google-fonts",
      {
        google: {
          families: [
            "Roboto:300,400,500,700",
            "Inconsolata:300,400,700",
            "Material+Icons",
            "Montserrat:100,300,400,500,600,700,800,900",
            "EB+Garamond:400,500,600,700,800"
          ],
          downloadFonts: true
        }
      }
    ]
]

The module will process these directives and generate a CSS file in ~assets/css resembling the following (cut short for brevity):

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"),
    url(/fonts/google/s/ebgaramond/v9/SlGUmQSNjdsmc35JDF1K5GR1SDw.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  src: local("EB Garamond Medium"), local("EBGaramond-Medium"),
    url(/fonts/google/s/ebgaramond/v9/SlGJmQSNjdsmc35JDF1K5GyGaywSQgs.ttf)
      format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 600;
  src: local("EB Garamond SemiBold"), local("EBGaramond-SemiBold"),
    url(/fonts/google/s/ebgaramond/v9/SlGJmQSNjdsmc35JDF1K5GyqbCwSQgs.ttf)
      format("truetype");
  font-display: swap;
}

The module will automatically add the 'font-display' directive and set it to the widely used and adopted 'swap' option.

Parameters

The following parameters are available:

• families

  An array of font families in the format "family:weight,weight,weight"

  type : array

  example: Roboto:300,400,500,700

• downloadFonts

  If true downloads the fonts to disk at /static/fonts/google preserving the font path and version.

  type : boolean

  default: true