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;
}