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.
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.
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.
Use of quotation marks with thefont-familyproperty’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.
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.
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:
(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.
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.
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.
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
" 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…
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.
" 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,…"
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…
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 .
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?
Would you care to expand on what you didn’t like about the exercise in the bug report? We here on the forums can’t change the exercise to make it less confusing, but if you sent a detailed bug report to the actual Codecademy staff who can make the changes you want.