Q on CSS Course - Font-Face III


#1

I’m having some trouble with Font-Face III on the Learn CSS course (Typography section).

I’m supposed to pull a font (Glegoo) from the fonts/ directory and create a selector in style.css using the @font-face property.

First - where can I access the fonts/ directory? Is it something within CodeAcademy? I think I’m just missing it.

Second - here’s the instructions I’m having trouble with: “Within the @font-face rule, add a src attribute with the relative path of the file Glegoo-Regular.ttf and a format of truetype. Make sure to include this path in the url() parentheses.”

Right now this is what I have:
@font-face {
font-family: ‘Glegoo’;
src: url(“relative-path”) format(’…/fonts/Glegoo-Regular.ttf’);
}

Originally when I clicked “Hint” it said the relative path for Glegoo-Regular.tff is “…/fonts/Glegoo-Regular.ttf” so that’s what I had in “relative-path” - but then when I clicked Run and it was wrong, it said: Did you add a ‘…/fonts/Glegoo-Regular.ttf’ value to the format value? So I moved the “…/fonts/Gelgoo…” to format instead.

Help! What am I doing wrong? And any other articles/videos/input as to understanding Font-Face would be great too. I understand linking Google Fonts but can’t wrap my head around this one.


#2

You can see the fonts/ directory by clicking the Folder icon to the left of the style.css and index.html tabs at the top center of the page.

I think you it will make more sense and be easier to solve once you see the folder structure. The solution is:

@font-face {
    font-family: "Glegoo";
    src: url(../fonts/Glegoo-Regular.ttf) format('truetype');
}

You are writing into the style.css which in the project folder is in styles/style.css so for that file to see fonts you go up a folder (…) then to fonts/Glegoo…)


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.