Using fonts on websites: Webfonts vs downloaded fonts

Question

I am currently going through a web development course on Udemy.com. One of the basic videos was about using fonts on your website. The lecturer explained that to use a 'non-standard font' such as one you've made/downloaded, you had to inform the user to download the font for them to see the website properly, but link to an alternative font in the meantime. This caused quite a bit of controversy in the discussion forum next to the video.

I had learned, from other sources, that you could link to a font from google.com/fonts (for example) which would allow you to use the lots of new fonts on your website.

My question is this: In the video, the lecturer downloaded a font from dafont.com and explained how to install it on your machine to get it to work on your machine alone. I was wondering, if you place the font file (.ttf) onto your server where the website is being hosted, could you not link to the font file in the same way as the google font example above but direct the link to the file instead?

Answer 1

Yes, you can. Just upload the font to your server and in your CSS add this:

@font-face {
    font-family: YourFont;
    src: url(YourFont.tff);
}

Answer 2

The information given to you was seriously outdated—and unrealistic, since most people could not be bothered to download and install fonts.

You can download a font and then generate different versions (formats) of it, for different platforms, to be used via @font-face. However, you need permission from the copyright holder of the font. Not all fonts are free, and even if you have legally obtained a font, you might still not be allowed to use it on web pages. Note that many repositories distribute fonts illegally claiming them to be free.

The difference between @font-face and the technique presented to you in the lecture is that @font-face works automatically, without any action needed on the user side, and without installing the font in the system (i.e. system privileges for installing fonts are not needed).

For a more detailed description, see my Guide to using special characters in HTML.