FAQ: CSS Typography - Font-Face III

@font-face {
  src: url("relative-path") format('format');

Sometimes we use "", sometimes '' and sometimes no quotes at all. Why?

Why is in the sample code the font url showed as url(fonts/Roboto.woff2) while in the exercise solution it becomes url(../fonts/Glegoo-Regular.ttf) with dots that preceding?

Which method for using Google Fonts is better?

We are taught two methods in the lesson.

  1. Use google fonts link tag in the head and referencing the font-family in css.
  2. Loading the google link tage url in a browser and copying the @font-face rule into css and removing the link tag from the head.

I am assuming using the link method means there is an additional call when the page is loaded. Does this slow the page down? I’m also assuming that by copying the Latin rules from the link means we’re only using rules that we really need. But the url is still called in the css to refence the font so I’m not sure what the benefits of each method are.

I prefer removing the tag from the head section in some ways as it cleans up our code and we only need the references in the css.

Any help appreciated on the best practice would be useful to know. Pros and cons of each method?

1 Like

I’m sorry but what does this mean exactly:

While Google Fonts and other resources can broaden font selection, you may wish to use an entirely different font or abstain from using a font from an external service.

and why would we prefer to use local fonts over external fonts? Is it because it will load faster?

Yes, I am on Front Face 3 (18/19) and it’s asking me to name a value for "…fonts/Glegoo-Regular.ttf) yet there is no explanation of what value they’re referring to in the cheatsheet, nor in previous slides or videos. I finally clicked “solve problem,” just to be given THE EXACT SAME ANSWER I TYPED IN. WTF?

1 Like

How have the instructions for this lesson not been fixed yet? Incredible.

Yeh for anyone that’s wondering, this definitely needs fixing. Followed all steps (which are pretty confusing!) and it would not let me pass. Problem solved it and came to the same end code. Resorted to auto solution and it was the exact same code that I had written.

TL:DR Auto solve this step, it doesn’t work.

1 Like

Same thing here. :confused:

Hello, I find this lesson is so confusing. Cleared it somehow nonetheless.
One question though,

On the instruction it only say to put src: for Glegoo-Regular, even though there also Glegoo-Bold.
Question is did I do it right by placing src: for Glegoo-Bold right below Glegoo-Regular?

I have a problem with the fonts. I have a <h1 class “nombre”> within the CSS file I am trying to set the font-family like this.

.nombre {

margin-top: 15px;
margin-bottom: 30px;
font-family: “Pinyon Script” “Kunstler Script”;
font-size: 125px;
text-align: right;
padding-right: 40px;

The Pinyon Script was imported from google fonts as described in the lesson, I pasted the @font-face at the top of my css.

@font-face {
font-family: “Pinyon Script”;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/pinyonscript/v11/6xKpdSJbL9-e9LuoeQiDRQR8WOXaOg.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,

The problem comes when using a fallback font…if I use the fallback font alone it will work, if I use the Pinyon script alone, it will work, but once they are together neither of them works.

I saw the Kunstler Script in “fonts” within Windows 10, so I assumed it was supported, if not…is there a way to know what fonts can be used as fallback fonts? or is there any way to fix this problem

This seems to be the answer: because codecademy

What is the difference between linking via e.g. google-fonts, using @font-face or locally linking? Are there any advantages/disadvantages?