Using Google Fonts with only CSS access?

In the free version of Cargo Collective, I’m able to edit the complete CSS, but not the HTML of my site. Assuming I stick to the free version and thus remain able to only edit/add to the CSS, is there a way for me to use a Google Font in one of my divs?

I’ve only found ways to use Google Fonts that require access to the HTML.

Answer

If you’re on Google Fonts and you select any font, under “Embed” it gives you two ways of importing it: “Standard” (which loads it in the HTML via a <link /> tag), and “@import”. You want to use “@import“.

You can see that you can include fonts via CSS by using

@import 'https://fonts.google.com?css?family=Font+Name'; 

Make sure and put this in the top of your CSS file.

Once this is done, you can use it like you would any other font:

.someSelector {
    font-family: 'Font Name', fallback-font; 
}

Attribution
Source : Link , Question Author : T. Esther , Answer Author : Zach Saucier

Leave a Comment