Theming Guide: Using Web Fonts in Drupal

Adding External Web Fonts in Drupal

Most popular web font stacks can be included with minimal effort, especially when loading from an external source. In this example we will load a Google font into our theme thru the libraries file.

Filename

example.libraries.yml

File contents

fonts:
  version: VERSION
    example:
      '//fonts.googleapis.com/css?family=Open+Sans:400,700,300': { type: external}

Adding Local Web Fonts in Drupal

When implementing local web fonts, you can reference a local CSS within your libraries file to isolate the font import. After adding to the theme libraries file, we recommend using the @font-face rule to accomplish this. The below example shows broader coverage for each browser, but this can be trimmed based on the available font library.

Filename

example.libraries.yml

File contents

fonts:
  version: VERSION
    example:
      fonts/example.css: {} # local font

Filename

fonts/example.css

File contents

@font-face {
  font-family: 'Klavika Light Condensed';
  src: url('../fonts/Klavika-LightCondensed.eot');
  src: url('../fonts/Klavika-LightCondensed.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Klavika-LightCondensed.woff') format('woff'),
  url('../fonts/Klavika-LightCondensed.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

Additional References