Fonts

Open license web fonts are used within these patterns and are assigned tokens primary and secondary.

Token	Font Family	Description
`Primary`	Montserrat	Designated for headings and some user interface typography. See Google Font Specimen for details.
`Secondary`	Lato	Designated for buttons and body copy (lists/paragraphs). See Google Font Specimen for details.

Tailwindcss

Font families, weights, and styles can be assigned using Tailwindcss utilities as well.

Demonstration

Primary Font (Montserrat)

Secondary Font (Lato)

Markup

<div>
  <p class="font-primary">Primary Font (Montserrat)</p>
  <p class="font-secondary">Secondary Font (Lato)</p>
</div>

Usage

Global Stylesheet

Fonts are imported automatically by the global stylesheet.

<link rel="stylesheet" href="/dist/styles/site-default.css">

Module Import

@use 'utilities/fonts/fonts';

Or, import from the Google Fonts CSS API directly for the customization of weights, etc. HTML <link> tag:

<!-- Add the following stylesheet in the <head> of the document -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,800,800i%7CMontserrat:400,400i,700">

Sass import:

// Add the following import statement in Sass file.
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,800,800i%7CMontserrat:400,400i,700");