Including Bold Font In Drupal 8 Library

PROBLEM
In Drupal 8, we are now putting everything in a libraries.yml file for the theme. When using fonts from other sources (HTML5), you need to list it like such:

global:
  css:
    theme:
      dist/style.css: {}
      https://fonts.googleapis.com/css?family=Source+Sans+Pro: {  }

Doing it this way is just fine and dandy but what about the specific bold? If you look at the Source Sans Pro on google fonts, you see this font does Bold, Italic, etc.

However, in practice, if you just include the code above and make the font bold in the style, bold isn’t really bold. It’s more like a different color; not really bolding the text:

SOLUTION
There are no notes in Drupal of how to include the different boldnesses or anything of different fonts. I kinda had to play around with it. With the google fonts, you can select the different fonts you want and it will give you what you need to include in your page… But that’s no good for Drupal 8 since it’s using yml files!

In order to get the font to be the real bold text, I put the following in the yml:

global:
  css:
    theme:
      dist/style.css: {}
      https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700: {  }

So just add the :400,700 to the end of the thing. Now it looks correct:

Leave a Reply

Your email address will not be published. Required fields are marked *