How to import Google Web Font in CSS file?

css fonts google-webfonts
David picture David · Feb 3, 2013 · Viewed 772k times · Source

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

ModernDesigner picture ModernDesigner · Feb 3, 2013

Use the @import method:

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

Obviously, "Open Sans" (Open+Sans) is the font that is imported. So replace it with yours. If the font's name has multiple words, URL-encode it by adding a + sign between each word, as I did.

Make sure to place the @import at the very top of your CSS, before any rules.

Google Fonts can automatically generate the @import directive for you. Once you have chosen a font, click the (+) icon next to it. In bottom-left corner, a container titled "1 Family Selected" will appear. Click it, and it will expand. Use the "Customize" tab to select options, and then switch back to "Embed" and click "@import" under "Embed Font". Copy the CSS between the <style> tags into your stylesheet.

Related questions

Is there any "font smoothing" in Google Chrome?

I'm using google webfonts and they fine at super large font sizes, but at 18px, they look awful. I've read here and there that there are solutions for font smoothing, but I haven't found any where that explains it clearly …

Read More
Converting and rendering web fonts to base64 - keep original look

I want to defer font loading on my site inspired by deferred font loading logic for Smashing Magazine. Main part of this is converting fonts to base64 and preparing your CSS file. My steps so far: Pick fonts on Google …

Read More
How to use specific font styles with CSS, from Google fonts (ie. thin, extra-light..)

Google served font like Montserrat has a lot of different styles: Thin, Extra-Light, Light, Regular, etc... I could not find a way to specify a style with CSS. Using Font-weight can access only some of them as can be seen …

Read More