FAQ: CSS Typography - Font-Face II


#1

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!


#2

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


#3

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

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?


#5

@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:


#6

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


#7

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.


#8

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


#9

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