In this blog we are going to cover how we can add easily any external fonts using the Drupal theming system.
We assume that we already have access to the custom theme.
First of all we need to search for the selected font library or should google that. For example we want to enable the Roboto font-family for our theme. So first of all we need to search for the Roboto. The first link should be google originating one.
Click on the link.
Now we need to select the exact style based on the font style and font weight.
For example, we want to proceed with the three styles, then we’ll select them. Google will automatically create a cdn link for the font file as following.
Under the User on the web heading select the import radio and copy the link starting the fonts.googleapis… “//fonts.googleapis.com/css2?family=Roboto:ital,[email protected],100;0,300;1,100&display=swap”
Now, we need to open the custom theme’s mytheme.libraries.yml file (Here mytheme is the name of my example custom theme) and create a theme class if not already created with the following syntax:
Please note that here the fonts.googleapis… link has been the one copied and pasted earlier from the google font selection.
Next, we need to enable that class subtheme-styling in our mytheme.info.yml file.
Done! Now we can use this newly imported font-family in our css file. 🙂