FAQ: CSS Typography - Font-Face III

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

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!

This lesson was so confusing… the images and the text doesn’t match. One image has " " in the font-family property, the other one has ’ ', and another image says it doesn’t have " ".

The image says it is .tff format and the text says it is with a double t = .ttf

¿?

7 Likes

I wish they had some sort of video walk through, would happily pay more to learn.

6 Likes

Ok, something is screwy in the #18 typography font-face 3 lesson. On “instruction #2” I did the correct syntax according to what was asked and it still will not work. I eventually just pressed the hint button and it mentioned using the “…/”
So why not add the two periods in the example picture in the instruction area where there is an example pic of the thing that is being taught?
I will show a pic of what I mean. Please fix this. It’s a simple thing but its still confusing.


There are also other typo mistakes in this lesson. This is the first lesson I’ve noticed with mistakes like this.

12 Likes

This lesson on Font Face III was some of the most confusing to me. One instruction says to open code editor and go to the font section to view path. It would be helpful to have video on this. The syntax is not explained either of commas vs semi colon to end a multi value statement in this lesson. So many parts to it.

8 Likes

There should be more in depth instructions on the actual syntax. I used a semi colon “;” instead of a comma “,” when there is multi part values in this part of the lesson. I have been CSS section for 2 weeks off and on. Not a programming language in the OOP sense. I start 6 month boot camp in 2 months for full stack. Coming from .Net SQL background this seems like it needs a giant reference manual to use this.

the amount of dots show how many times you need to go out of your file where you’re now ( style.css) to get to the file you want to get to (Glegoo-regular.ttf). So basically, you are going out of the FILE (which is in this case is named style.css) (one dot), going out of the FOLDER (named styles) (another dot). once you made clear that you want to go out 2 times, you make a / and write the FOLDER you want to get in(font) and then another/, and then the file in the folder (Glegoo-regular.ttf).
in short: you go out, out till you are out of every file or folder, then you go in, in, till you are at your desired file.

9 Likes

shouldn’t /files/fonts/Glegoo-Regular.ttf work?

@cryptowell @jmfeld @shoquim @saalr @zmanphx @kantucky @michaelv.g @mtf

I also found this exercise really confusing, and I agree it could be written/explained much more clearly.

I’ve done some digging, and I want to share with you all what I’ve found out :smiley:


Relative path

Here you’ll find a good thread which I joined, and which gets to the bottom of the differences between using:

url("../fonts/Glegoo-Regular.ttf")
url("./fonts/Glegoo-Regular.ttf")
url("/fonts/Glegoo-Regular.ttf")
url("fonts/Glegoo-Regular.ttf")

I also really like @saalr’s explanation about what the number of . means:


Use of quotation marks with the url( ) CSS data type

According to https://developer.mozilla.org/en-US/docs/Web/CSS/url#Syntax, the use of quotation marks is optional, and if you do use them, you can use either single or double ones.


Use of quotation marks with the font-family property’s value

From what I can gather, best practice is to use quotation marks where the font-family value (i.e. the name of the typeface or font you want to use) includes white space (e.g. it is more than one word); whereas quotation marks are not required when it is a single word or hyphenated. e.g.

font-family="Helvetica Neue", Helvetica, Arial, sans-serif;

However, as @zainabrawat explains here (where she answers similar queries to ours about this same exercise), in practice things are less clear cut, and there are instances when it still works (i) omitting quotation marks from names with more than one word, and (ii) using quotation marks with single-word names. :crazy_face:

In the same post, you will also notice she confirms that when quotation marks are used, it doesn’t make any difference whether you use single or double ones. In fact, this seems to be the case throughout HTML and CSS whenever quotation marks are required. Could someone confirm this?

However, she does suggest that hyphenated names should have quotation marks, which contradicts what seems to be standard practice with sans-serif, for example (and as I’ve illustrated above). Maybe, @zainabrawat could clarify this?

I think what has confused some of us regarding the use of quotation marks in the font-family declaration, is the fact that, in this exercise, task 1 won’t allow Glegoo without quotation marks in the following rule:

@font-face {
  font-family: Glegoo;
}

(i.e. it only allows this rule with the value "Glegoo" or 'Glegoo').

I think this is an error, especially after discovering that, after having completed the rest of the tasks in this exercise, this @font-face rule still works if you delete the quotation marks from Glegoo that you were forced to include before. :face_with_raised_eyebrow: :thinking:

Further evidence to suggest that Glegoo doesn’t need quotation marks is the fact that task 3 does allow it within the .banner p rule set.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Valid_family_names has some more detail and examples on using quotation marks with font-family names, if you’re interested. (But personally, as I’m still a beginner, I found the extra detail here a bit too much, and at risk of confusing me again).

I’m going to submit an error report for this exercise, with a link to this thread. I don’t think the issue is so much that the information and examples in this exercise are wrong, but more that it’s very confusing and could be explained a lot more clearly.

Anyway, I hope this has been a helpful round-up! :smiley:

8 Likes

So what I’ve found out is that:

CSS has a generic family and these fonts shouldn’t have quotes around them.
other fonts can be quoted or left without.

Read More w3.org

3 Likes

I typed in exactly what you’ve recommended it still doesn’t work! Eventually I gave up got the automatic solution - and what was typed in there looks identical to what I had put in which didn’t work :S

This is the first exercise which has had me stumped

Instructions:
" In the fonts/ directory, you’ll notice that we have added several local font files."

I’ll do what? Where is this directory?
As of now there are two tabs I can look at index.html and style.css .
I think I understand, this means that fonts have been added in a folder serverside in a relative location to the index file right? But how would I notice that? This instruction just mentions it like it’s some no problem easy thing we should all notice naturally and I have no idea where I can notice this…

EDIT
yeah, I found out what was ment now:

@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;
}

thats the part this is referring to… but that did not come to me as easyly as the casual mention in the instruction implies. This might do well with an a bit more detailed explanation as what to notice for untrained eyes.

EDIT
" Let’s change the typography of the banner, using local font files. If you open up the fonts/ directory using the file navigator in the code editor,…"

Wait, WHAT?

OK maybe I didn’t get it anyway.
I Have no idea what file directory we are talking about and i have no idea what the file navigator is…

EDIT
Ok, now I found it.

I suggest changin the text to:
Let’s change the typography of the banner, using local font files. If you open up the fonts/ directory using the file navigator in the code editor (look for the folder icon to the left of you style.css tab), you’ll notice that we have added local font files Glegoo-Regular.ttf and Glegoo-Bold.ttf .

2 Likes

I was wondering why there is no lesson on using the @import declaration to load external fonts?

Especially since when you go to Google Fonts, one of the things you can do is to copy the prepared @import statement and paste it into your CSS.

This is the method I have used in the past, which is is a nice one-liner compared to the @font-face method of loading external fonts.

Is there some reason why this is not mentioned? Is it not recommended for some reason?

2 Likes

I wonder why this is so, too. Is there anyone to explain this?

This is by far the most baffling lesson on the Codecademy CSS module.

Why do we need to put a double period before /fonts/Glegoo-Regular.ttf , when we do not need to do the same for any of the other relative paths?

Why doesn’t the example code feature quote marks (" ") around the urls?

Why does the example code refer to one font file as .tff instead of .ttf?

In part 3, why do you no longer need to use quote marks around Glegoo, when you had to use them previously, in the font-face section?

From the comments here, it seems this exercise has been completely borked for at least 9 months. I realize that many of my questions have been answered by other posters, but why hasn’t Codecademy fixed anything?