The first part of our theme we'll look at is typography. We'll choose a minimum of two fonts and set our font families with sensible fallback fonts. We may also need to make some layout tweaks while we do this. This is because we'll be increasing and decreasing our font sizes in places and this can affect the layout and uncover areas that need to be laid out differently.
We need to create a file called _typography.scss in the scss/theme directory. We'll add our main fonts and font family defaults here. We'll also use a list and an @each
loop to import all the necessary fonts from Google Fonts:
$fonts: ( 'Bilbo+Swash+Caps', 'Roboto' ) !default; $main-font: 'Verdana' !default; $secondary-font: 'Roboto' !default; $tertiary-font: 'Bilbo Swash Caps' !default; $body-font-family: ($main-font, Geneva, sans-serif) !default; $heading-font-family: ($secondary-font, Helvetica, Arial, sans-serif) !default; $accent-font...