FAQ: CSS Typography - Font-Face I

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Font-Face I” 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 I

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

In which situation do I prefer which method to modifiy and add new fonts - link method or @font-face method?

3

Good Question
I just completed Font Face III, I felt it was glossed over quickly. The syntax wasn’t explained. There is like 3 or 4 different ways to link fonts in. Each syntax is completely different. Which one do we use? I am assuming in a employment setting, the developers will prefer one over the other as their standard.

1 Like
4

Hi guys can i please get help in starting the exercise on Font 11 and i cant get the URL that i saw entered into the browser, I’ll appreciate your help.

5

Hi @nomzee I had the same question & searched for it. Answer: https://developers.google.com/fonts/docs/getting_started

Specifying font families and styles in a stylesheet URL

To determine what URL to use in your stylesheet link, start with the Google Fonts API base URL:
https://fonts.googleapis.com/css
Then, add the family= URL parameter, with one or more font family names and styles.
For example, to request the [Inconsolata] font:
https://fonts.googleapis.com/css?family=Inconsolata

1 Like
6

Hi Tom

Thanks for that I kind of went through the video, which are very helpful in getting the answers, but I appreciate your help.

Stay Coding

Peter

7

Hi, I am stuck with how to load the css/latin rules.

I did exactly as they said and pasted the link in the browser but no latin rules come up.

Please help!

3 Likes
8

Generally you should just link the rel in the html document for optimization of page rendering.

9

did you figure it out? this is the first time ive been stuck on the htm/css course, i feel like maybe the instructions are outdated or something.

10

how to apply font to particular section using @font-face property?

11

Can you merge multiple fonts from the same font-family, when using @font-face?
For example:
@font-face ‘font xyz’
bold,
italic,
regular

Instead of writing 3 separate font-face codes for bold, italic, regular respectively?

12

i have a question , what is non-user fonts and give some examples?

13

Most developers tend to use the <link> method

14

As explained in this lesson, non-user fonts are fonts stored in directories and not installed on users’ computers by default. An example of a non-user font is Roboto. It is available on Google Fonts and is not installed on a user’s computer by default

15

When using @font-face, you are basically allowing elements to use specific fonts. It is not actually applying a font to an element. So if you wanted to apply a certain non-user font to a specific section, you would just have to add it normally, as if it was a pre-installed font

17

I’m having trouble understanding how to complete the @font-face portion of CSS Typography.
Instructions tell me to:

  1. Instead of using the font’s link in the HTML document, enter the link into the URL bar in the browser.

  2. The browser will load the CSS rules. You will need to focus on the rules that are directly labeled as /* latin */ . Some of the latin rules are on separate lines. You will need each of these.

  3. Copy each of the CSS rules labeled latin, and paste the rules from the browser to the top of style.css .

When I paste the link into the URL bar of the browser it doesn’t work.

The Codecademy lesson provides a direct link to the font, and that works, but I’m not learning how to do this by just clicking on the link.

How common is it to need to use the @font-face method of linking a font? If I need to know how to do it, I want to learn.

ps…I am using a new Alienware M17 laptop with Windows 10 pro. Also have no issues with my internet connection.

Any help or direction provided in your reply is totally appreciated.

18

I think this section is wrong. In order to use the import in your CSS, just go to the google font page and use the @import option. You will get

<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
</style>

Copy this into the top of your CSS (remove the <style> and </style> and you’re done. It will import the rules for ‘Vietnamese’ and ‘latin-ext’ too, but I don’t see why that would be a problem.
BTW, you cannot complete the lesson if you do it like this, as codecademy wants you to put in the latin-rules separately…