To load Google web fonts asynchronously in Roots Sage you can use the Typekit Web Font Loader and Google fonts of your choice. It allows you to load fonts with ease and async.

Web Font Loader

The script below will load two fonts of my choice. It needs to be added to main.js and then loaded into Sage using yarn build:production or yarn build. It will then add new html tag classes you can use besides just assigning the newly available fonts to text.

// Load some Google Fonts asynchrously 
// Typekit Web Font Loader https://github.com/typekit/webfontloader// https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js loads latest 1.x version

window.WebFontConfig = {  google: { families: [ 'Raleway:300,400,400i,700', 'Open+Sans:300,400,400i,700' ] },};
(function() {  var wf = document.createElement('script');  
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';  
wf.type = 'text/javascript';  wf.async = 'true';  
var s = document.getElementsByTagName('script')[0];  
s.parentNode.insertBefore(wf, s);
})();

Google Fonts

Google Fonts of your choice you can get at https://fonts.google.com/ . There you can choose a font and the font weights you would like to work with. That is how we picked a few for Raleway and Open Sans in the example. But you are free to pick your own of course.

Font Styling

To add fonts to headers, ps and such you can add styling to resources/assets/styles/components/_type.scss . We used something like this for starters:

.home {  h1,  h2,  h3 {    font-family: Raleway, sans-serif;  }
  .h2,  h2 {    font-size: 2.5rem;  }}