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?

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