FAQ: CSS Typography - Font-Face II

The attached picture shows what happens when I go to the page for Space Mono. Does anyone know why this happens?

This is normal. It’s meant for you to copy and paste into your own project.

What’s happening here, is Space Mono isn’t what show up, so it blocks completion of the exercise.

Aaah, sorry. I missed that. That exact address shows the following to me:

You can copy from here:

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Space Mono'), local('SpaceMono-Regular'), url(https://fonts.gstatic.com/s/spacemono/v1/adVweg3BJhE6r8jYmXseHQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  src: local('Space Mono Bold'), local('SpaceMono-Bold'), url(https://fonts.gstatic.com/s/spacemono/v1/vdpMRWfyjfCvDYTz00NEPGaVI6zN22yiurzcBKxPjFE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
2 Likes

Thanks for this, otherwise I would have had to check the solution to figure this out.

Hi there,

I’m currently working on this excersize and I’m bumping into a problem I can’t solve, can you help me?

When I paste the two @font-face tags the Codecademy instructions tick off the excersize, but the web page on the right doesn’t use my CSS style sheet anymore. I see only plain HTML rendered in the browser. Is that a common problem? How can I fix it?

Edit: When I copy/paste the code from this post it works fine, but I still don’t see why it doesn’t work with the code directly copied from Google fonts.

2 Likes

We loaded the normal (400) and bold (700) font weights here, yet the .bold class example where Space Mono is applied is a 900 font weight in the CSS. Does this mean a font weight of 700 or 900 would render in the browser? Thanks.

Is anyone else unable to paste into the editor for this exercise (CSS Typography-Font Face II). Specifically, I attempted to paste the link for the Space Mono font from Google but was unable and had to type it (removing the &display=swap). Now I’m attempting to paste the CSS /latin/ rules and again, I’m unable to. I wasn’t even able to paste the link shown in the exercise to the editor. Help! Call me lazy, but I’m not really wanting to type this all in letter-by-letter, line-by-line. Good exercise/practice, but…

1 Like

Wondering if this has changed. Here’s what I see when I go to fonts.google.com, search the font, customize it to include 700 and then click on @import:

Screen Shot 2020-03-26 at 5.26.03 PM

Is this the new code we use for the stylesheet?

That will work, but one wonders what the instructions advise… Standard or Import?

If you use the @import method, be sure to write it above all the other style sheets.


There are technical concerns with respect to @import which one would be wise to investigate for the sake of learning and gaining background information for present or future use. When used in a style sheet, it must always be written at the top, never lower down. I could be working with faulty memory so look into whether @import is asynchronous, or does it hold up all the other style sheet downloads (and possibly others)?

It looks like this lesson needs to be updated to align with fonts.google update / change

1 Like

Hiya,
I was frustrated by the same problem until I found this workaround:
Use your browsers edit menu to copy and paste, when it’s not working using (right mouse-click) in codecademy’s IDE.

1 Like

If you are experiencing frustration getting through this lesson you can copy/paste what stap88 posted here which comes directly from HERE. In order to get the link in the previous sentence to display in your browser you need to copy/paste the link from ‘link panel’ labeled ‘Embed’ on the right side of HERE. By this I mean specifically the https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700 part. This lessons’ text was convoluted at best. If you want or need to use Googles’ font database to have some particular font in your web-site/web-page you start HERE in order to get all the code/info you need to use either getting it displayed via HTML or CSS. I am new to all this so don’t expect me to be able to give a technical explanation like mtf does. I am an old programmer who just does what is right and necessary to get the right results when it comes to getting a computer do what you or I want it to do.

im having trouble with using the @font-face in CSS exercise, tried adding the “@font-face and the link for the font but its not working plus why isnt there any” solved this solution" button in this exercise

I ran into the same problem when i did it. I loaded the solved code and it displayed correctly. So when I reset everything to try to figure it out I realized i had missed the closing } when I copied the @fontface latin rules. Google fonts displays the closing brace one line below the rest of the rules which is why I missed it the first time I copied it all.

3 Likes

Which way the fonts load faster? Using @font-face in CSS or linking to a font in HTML?

They will load at the same rate, the speed of the download. Latency is the only factor in both cases.

It said I finished the lesson successfully, so I’m assuming that I did what was expected with @font-face, but the font never changed in the left panel.

I’m on Firefox. Is this this a problem with my browser? Or is it possible to get green check marks while still doing something wrong?

Noticed that there is both a latin and latin-ext for each variant. My understanding is that latin-ext has more unicode characters supported. Assuming there isn’t a big jump in latency to download the additional characters, would it make more sense to to use the latin-ext version or is it not really just a super-set of latin?

SERP