@font-your-face

You want an other font family. A beautiful one.. There is a problem. Font familys have to be readable by the browser of the visitor. If you us special ones, you have to add your font-family with de page.

@font-your-face makes this possible. You can choose between several providers. Some of them are paying.. We choose the free Google Fonts. You active it together with the base module.

Drupal8_001834.png

After flushing the cache you see the new link.


Drupal8_001835.png

First import the fonts. Here are so many fonts (>4000) that you can interrupt the download at any time... To explore.. you don't need them all.

Drupal8_001836.png

If you 'Browe' you see the imported ones. Activate some of them. Those you don't use, don't activate. Every time your site is visited, the fonts are downloaded...


Drupal8_001837.png

Now click on the title of the activated font. You see the CSS needed for implicating this font.


Drupal8_001838.png

You can now, using the CSS injector (part of the Assett injector), add this code to the class or ID of the part you want to change. I set the site name and slogan in this font type.

Drupal8_001839.png

The result:


Drupal8_001840.png

The stylesheet is present in de source code of the page. It has been downloaded directly from Google.

Drupal8_001842.png

You als can do it reverse.. The configuration of the font display let you link the font-family to a class. So you can link the font with any class without using the CSS injector.


Drupal8_001841.png