With the advent of web fonts, can’t a user see a site’s font even if those fonts aren’t installed on her computer?

Question

With the advent of web fonts, can’t a user see a site’s font even if those fonts aren’t installed on her computer?

Answer

Yes! As you will learn in unit 5, non user fonts are fonts which are stored remotely in publicly available directories. Even if a user does not have these fonts installed on her computer, she can use the @font-face property or the <link> element to link to them.

Google Fonts is a popular directory with thousands of free fonts.

30 Likes

I would love to see any example of @font-face

3 Likes

I would love to see any example of @font-face

Like these?

7 Likes

Can you please give an example of how to use @font-face property or “link” in a sample code to utilize those public fonts?
Thanks.

Maybe this will help:

2 Likes

The video at the end of Review Visual Rules (end of this section) provides an example on how to use Google Fonts for our projects. Skip to to min 5:38, Google Fonts, select the font by hitting the plus sign to the top right of the font. This provided both the link to add to the HTML file as well as the CSS declaration for our CSS file.

3 Likes

Inside style.css, add the font family of the main heading ( h1 ) and subheading ( h2 ) to Georgia .

This could be the most confusing sentence. Could this not have been typed as:

Inside style.css, add the font family: Georgia; to the main heading ( h1 ) and subheading ( h2).

2 Likes

This sounds like it would take up space on a user’s computer… or am I misunderstanding? Would the font automatically download? Would this slow down the user’s experience on a website?

If you use google fonts, it allows you to download specific font-families, but from my view so far, it seems like it takes up space on an individual’s computer if they were downloaded. (Not an excessive amount of space however)

Much thanks for coming to my rescue. What a twisted question that was. My brain was almost scattered as it went into nesting h2 inside of h1. Lord have mercy.

Another thing is whenever I am inside style.css, my code refuses to run without error until I refresh the entire page. At first in a simple solution at the very beginning of which I very sure of the answer to the question, I spent over half an hour not knowing what was wrong or where I had a typo. that was few days ago, I had to bring my problem here for help. The help and solution took another half an hour which I did not actually get an answer but through the process of going back and forth, I figured out the problem with style.css at run time. Nothing changes until page is refreshed.

Thanks again.
Now I know better, to simply refresh each I run or about to run my code.

Which is quicker to load? A webfonts font-face or directly from the computer with font-family?

1 Like

The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user’s own computer. - MDN

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
2 Likes