Using Google Fonts with only CSS access?

Question

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 1

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; 
}

Answer 2

You can import fonts in CSS like this:

@import 'https://fonts.googleapis.com/css?family=FontName';