Magento 2 – How to Add Google Fonts In Your Theme

Occasionally a client will want to be a bit more creative with texts and fonts than the fonts built into your Magento 2.x theme.
Google fonts is a good solution for this, since they are readily available and it’s really easy to add them in magento 2.x.

First step is to find your theme’s default_head_blocks.xml file and add google fonts inside the head block (see attached code for reference).
[Google Fonts Code (168)

Second step is to find your theme’s custom css file and add a style rule to use the google font(in this case Pacifico )- .pacifico {font-family: ‘Pacifico’, cursive;}

Last step is to add a span inside of an H1 tag, with a class of pacifico (see above code for reference).

Finally, clear your store’s static files cache and flush cache store and regenerate your static content using the built in cli command php bin/magento setup:static-content:deploy.

Once that’s done, your H1 tag will now show the Google font Pacifico instead of the default font.

Good luck!

This entry was posted in Magento. Bookmark the permalink.