How to add Google Fonts to Drupal 8 theme, the PROPER way

Created on 2016-May-14
Updated on 2016-May-14

Here's the proper way to add external google fonts.

NOTE: Important parts here are YOURTHEMENAME.info.yml and YOURTHEMENAME.libraries.yml

YOURTHEMENAME.info.yml


libraries:
- 'YOURTHEMENAME/fonts'

YOURTHEMENAME.libraries.yml


fonts:
css:
theme:
'//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400,300,700|Open+Sans:300italic,400,300': { type: external, minified: true }

YOURTHEMENAME.info.yml

core: 8.x
type: theme
base theme: bootstrap

name: 'Bootstrap YOURTHEMENAME Sub-Theme'
description: 'Uses the jsDelivr CDN for all CSS and JavaScript. No source files or compiling is necessary and is recommended for simple sites or beginners.'
package: 'Bootstrap'

regions:
topbar: 'Topbar'
navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Hero'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'

libraries:
- 'YOURTHEMENAME/global-styling'
- 'YOURTHEMENAME/fonts'

YOURTHEMENAME.libraries.yml


global-styling:
css:
theme:
css/style.css: {}

js:
js/helpers.js: {}
dependencies:
- core/jquery

fonts:
css:
theme:
'//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400,300,700|Open+Sans:300italic,400,300': { type: external, minified: true }