How can I add an external (CDN) CSS style sheet to a theme?

Question

I'm trying to add Font Awesome to a Bootstrap subtheme I have made.

Here is the code I am using in subtheme.libraries.yml, which is based on the documentation for hosting external JS libraries in Drupal 8:

font-awesome:
  remote: https://fortawesome.github.io/Font-Awesome/
  version: 4.5.0
  license:
    name: MIT
    url: https://fortawesome.github.io/Font-Awesome/license/
    gpl-compatible: true
  css:
    https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css: { type: external, minified: true }

Unfortunately this results in a WSOD. The error log gives these two errors:

Warning: constant(): Couldn't find constant CSS_HTTPS://MAXCDN.BOOTSTRAPCDN.COM/FONT-AWESOME/4.5.0/CSS/FONT-AWESOME.MIN.CSS in Drupal\Core\Asset\LibraryDiscoveryParser->buildByExtension() (line 143 of /srv/bindings/code/core/lib/Drupal/Core/Asset/LibraryDiscoveryParser.php).

And:

Warning: Illegal string offset 'weight' in Drupal\Core\Asset\LibraryDiscoveryParser->buildByExtension() (line 143 of /srv/bindings/928c941920f8443d9e50a3d908967fee/code/core/lib/Drupal/Core/Asset/LibraryDiscoveryParser.php).

Answer 1

If you have the same code from your question in your subtheme.libraries.yml file, but it isn't showing up, you still need to add that library to your subtheme.info.yml file

subtheme.info.yml

name: Subtheme Name
type: theme
description: 'A theme description.'
core_version_requirement: ^8 || ^9
base theme: bartik
libraries:
  - subthemename/global-styling
  - subthemename/font-awesome
  - subthemename/bootstrap

subtheme.libraries.yml

global-styling:
  css:
    theme:
      css/styles.css: {}
  js:
    js/scripts.js: {}

font-awesome:
  remote: https://fortawesome.github.io/Font-Awesome/
  version: 4.5.0
  license:
    name: MIT
    url: https://fortawesome.github.io/Font-Awesome/license/
    gpl-compatible: true
  css:
    theme:
      https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css: { type: external, minified: true }

bootstrap:
  remote: https://getbootstrap.com/docs/5.1/
  version: 5.1
  license:
    name: MIT
    url: https://getbootstrap.com/docs/5.1/about/license/
    gpl-compatible: true
  css:
    theme:
      https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css: { type: external, minified: true }
  js:
    https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js:  { type: external, minified: true }

Put another way, you first need to specify the library names in your info.yml file then define them in your libraries.yml file.

Answer 2

My understanding was that for a sub theme you defined the CSS as such:

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

...as discussed here: https://www.drupal.org/node/2165673

Answer 3

This worked for me, as of the 8.0.4 core release:

googlefonts-ptsans:
version: 1.0
license:
  name: google fonts
  url: https://www.google.com/fonts#AboutPlace:about
  gpl-compatible: true
css:
  base:
    https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700italic,700: {}