FAQ: CSS Typography - Font-Face II

This community-built FAQ covers the “Font-Face II” exercise from the lesson “CSS Typography”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Font-Face II

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Is anyone else wondering why you have to paste the CSS rules TWICE?? Where does it mention to do that???

Each rule refers to one font weight. The lesson says to include normal (400) and bold (700) font weights, so there are two rules. You can see the different font-weight values in each rule.

4 Likes

Fair enough. So then why would posting the exact same code twice make any difference? I’m going out on a limb here to assume that I would need to have one code with the font-weight at 400 and one at 700?

1 Like

@dacarrot24, @devlukasiewicz

That’s exactly what you do have.

You’re not posting the exact same code twice. The two latin @font-face rule sets look pretty much the same, but if you look at the font-weight and src properties, you’ll see that one is for 400/regular, and the other is for 700/bold. :wink:

1 Like

What are the pros and cons of using @font-face in CSS versus linking to a font in HTML?

2 Likes

There may still be some browsers out there that do not support this feature so some fallback may be required to substitute in a font via the <link> element in the HEAD or using a web-safe font we can expect to be on the user’s machine.

Depending on internet connection and download speed, the default font will be drawn in by the browser while it waits for the CSS font to come down. This can be unsettling for some.

Like all new and cutting edge developments, it takes time for universal adoption, sometimes years, so we should consider our audience’s needs before our own desire to be out front with new technologies.

3 Likes

Thanks for answering, Roy. It sounds like a service mindset is useful for a web developer to have.

2 Likes

Exactly. Responsive design isn’t just about adaptability and cross browser reliability, it’s also about responding to users’ needs, responsibly.

1 Like

When I try to look up the code for Space Mono in the font-face 2 module on google fonts, it is saying this font doesn’t exist… what am i doing wrong?

The URL i used is:
https://fonts.googleapis.com/css?family=space+mono:400,700

and I’m getting the below as a result:

Error (400): Missing font family

The requested font families are not available.

Requested: space mono (style: normal, weight: 400),space mono (style: normal, weight: 700)

https://fonts.google.com/?query=space

@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/v4/i7dMIFZifjKcF5UAWdDRaPpZUFWaHg.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;
}
My question is: Is the “Unicode range” and the “URL” necessary when copying and pasting in the @font-property?

The URL is necessary since that’s where the font is being downloaded from. As for the Unicode range, I would think it would apply on a case by case basis, but cannot give a definitive answer to that. We see above that apart from the first 256 characters (of which only the first 128 are ASCII) the range includes special characters, which if one has the time could be further investigated.

So you would say its not necessary in all cases to include the Unicode range right?

Without further investigation there is no definitive answer to that question. I cannot agree with something about which I am not sure myself. Perhaps there is an answer on CSS Tricks, or elsewhere. I’m sure there must something in the specs to describe this more definitively. Until we have an answer, we should not assume anything.

The purpose of Unicode is to provide a character set that is applicable in any locale. How far your site reaches out to international audiences would be a determining factor as concerns implementing the special characters outside of the typical Latin character set. I’m afraid there is no one pat answer to this question.

why are we copying the @font-face two times in css ?

It says “If you need help retrieving the link for the appropriate font, click here.”,so I clicked here and copied this.

/* latin */
@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/v4/i7dPIFZifjKcF5UAWdDRYEF8RQ.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;
}

I could not run. I noticed mine was a little different from the solution, but why?

Trying to paste the Font URL into my browser but I get the following message:

This site can’t be reached

fonts.googleapis.com ’s server IP address could not be found.

  • [Try running Windows Network Diagnostics](javascript:diagnoseErrors()).

DNS_PROBE_FINISHED_NXDOMAIN

It doesn’t work, even when I use the direct link given from the exercise. I don’t know what’s going on with my browser. The Google Fonts previews don’t even display on my browser either. Using Google Chrome.

One for font-weight normal (400).

The second for font-weight bold (700).