David David - 6 months ago 20
CSS Question

How to import Google Web Font in CSS file?

I'm working with a CMS which I only have access to the CSS file. So, I can't include anything thing in the HEAD of the document. I was wondering if there was a way to import the web font from within the CSS file?

Answer

Use the import method:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Obviously, "Open Sans" is the font that is imported. But you can replace it with yours. If it is a single word font, just include the font name after the family=... if it is two words, do as I did and add a + sign between each word.

NOTE: The @import line of code should be the very first line in your CSS file. (Thanks to @Ronny for pointing that out).

In the Google Webfont Library, when you decide upon which fonts you want to use, it gives you a box with three tabs. Each tab is an injection method, HTML, CSS or JavaScript. The @import tab should give you the code you need for css files. See image: