Browse cities

Adding Google Fonts to your Drupal 8 theme can be a bit more difficult than with Drupal 7. This is an example of how to install a font for every page of your website.

Here is the method previously used to install Google Fonts on every page of the theme using Drupal 7:

function MYTHEME_preprocess_html(&$variables) {
// this function is deprecated in D8
drupal_add_css('//fonts.googleapis.com/css?family=Roboto+Condensed', array('group' => CSS_THEME));
}

 

But in Drupal 8 it’s completely different – we need to use the libraries method, which is a bit more complicated.

First things first, we need to add a library in the last two lines of the theme.info.yml file. Remember that when adding the theme name you need to use all lower case for it to work properly.

name: Test
description: Test theme
type: theme
base theme: theme name
core: 8.x
libraries:
- test/fonts

 

After that, a library file needs to be created – the library is defined as themeName/libraryName in the .info.yml. file. The library file is named themeName.libraries.yml. This file opens with a declaration of libraryName:

fonts:
license:
name: SIL Open Font License, 1.1
url: https://goo.gl/UpQhAK /> css:
theme:
//fonts.googleapis.com/css?family=Roboto+Condensed: { type: external }
css/myStyles.css: {}

 

The YML file will work even without a license section but it’s a good idea to mention it as well. The font’s URL has the HTTP: removed so that it’s agnostic to secure-or-not connections at runtime. If everything is done properly you should be able to view the adjusted lines of code.

All you need to do now is implement the font into your CSS through a rule in the myStyles.css file located in your css folder.

 

Development

We do Drupal development

Go to our Drupal page!

Visit page!

Recommended Stories

Apigee Edge Microgateway: Why Would You Want to Use It and When Should You? 10 Typical Use Cases
So you're evaluating and comparing all the available solutions for centralizing and standardizing your APIs. And… (Read more)
Adriana Cacoveanu / Jan 17 '2020
Drupal 8 Media Library: Simplify The Way You Embed Media (2 Significant Improvements in Drupal 8.8)
Powerful, full-featured media handling in Drupal. This has been your, our, and all the content authors and Drupal… (Read more)
Adriana Cacoveanu / Jan 15 '2020
OPTASY Favorites: 5 Drupal Blog Posts that We Loved in December
We must have been some very well-behaved kids developers, judging by the big pile of great Drupal blog posts that… (Read more)
Adriana Cacoveanu / Dec 20 '2019