Adding external fonts as a library in Drupal 8

Books on a shelf

Wiring up an external font for your Drupal 8 site is a lot more straightforward thanks to libraries. In my case, I wanted to add two Google Fonts in addition to my theme styling. Therefore, I'll need three libraries: core, librefranklin, and opensans.

    
      
core:
css:
theme:
dest/style.css:
preprocess: true
js:
dest/script.js:
preprocess: true
dependencies:
- core/jquery
librefranklin:
css:
base:
'//fonts.googleapis.com/css?family=Libre+Franklin:400,400i,700': { external: true }
opensans:
css:
base:
'//fonts.googleapis.com/css?family=Open+Sans:400,400i,700': { external: true }

The patternlab.libraries.yml file for my site.

Next, define the global libraries in the themename.info.yml file in the root of the theme. Because these libraries are added in the themename.info.yml file, they will be included on every page. Check out the link the below to see how to add libraries to specific pages or sets of pages.

    
      
libraries:
- patternlab/core
- patternlab/librefranklin
- patternlab/opensans

A snippet from the patternlab.info.yml file of my site.

Learn more about libraries in Drupal 8 theming: https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-a…. There is so much more you can do with libraries, such as adding them to only a specific page, overriding libraries, and defining where JavaScript is loaded on the page.