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;

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.

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…

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)?