@font-face issues

I’m working on the Build Your Own Cheatsheet HTML/CSS project and I am really struggling to get the @font-face property to work on my page. I have been using Raleway Dots for my H1.
I copied the @font-face CSS link provided by Google Fonts into my style.css sheet as follows:

@font-face {
@import url(‘https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap’);
}

but I cannot get it to respond at all – only adding a linked version from my HTML seems to produce any response. Any advice on how to fix this?

Hey there falseastronomy!
I think the problem is due to the @import there inside @font-face.
The correct syntax to use a font inside a .css file in your case is either this:

@import url('https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap');

Or this:

@font-face {
  font-family: 'Raleway Dots';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/ralewaydots/v8/6NUR8FifJg6AfQvzpshgwJ8UzvVE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Remember that you must link the font inside the html <head> as well:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap" rel="stylesheet">

Hope this helps :slight_smile:

Thank you! :grinning:
This is super helpful. How were you able to access or generate the information on the woff2 format? I never successfully located that on the Google Fonts page.

You’re welcome,
the url to googleapis.com gives you the font-face css rules for the font to be used in the website.
The url to gstatic.com in font-face is the link to the font that will be requested and downloaded by each visitor to the website.
Does this solve your question? :slight_smile:

Hi! So the issue I seem to be running into is that I can’t find the link to gstatic.com with the relevant info – when I try to download other fonts, instead of the .woff2 ending I’m only seeing a url ending in “&display=swap”

I’m not sure if I’m not looking in the right place.

Yes. Copypaste that into a browser url address bar.

hey @falseastronomy! Did you figure it out in the end?

Hey! Sorry I didn’t answer this sooner – I got flattened with a migraine. Yes, I did figure it out! Thank you so much for all your help! It made a huge difference.

1 Like