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.