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?


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);
  • Ah, thank you. Is that a CSS3 property? Because it wasn't covered in basic CSS. – Youngdad33 Nov 11 '14 at 21:50

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.

  • Thank you, I will read that. Yes, I thought the notion was rather odd. – Youngdad33 Nov 11 '14 at 22:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.