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

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 }