Question

When I started working on HTML there were only a little choice of font we could use for HTML rendered on every browser

Arial, Verdana, Times new roman, Georgia. Now, from 2003 the browser changed a lot, are there any new compatible fonts for every browser or for fonts we are still back in the early 2k years?

Answer 1

Naraj, I think what you’re referring to are web-safe fonts. These are fonts that every user has on their machine.

Before I get into that, let me try to explain how font loading works. When you visit a website, the CSS file tells your computer what font file to look for. If you don’t have that font file on your computer, it won’t display! Luckily, browsers are smart and will fall back on defaults, like Arial, in cases like this.

Anyway, that list of fonts you’re referencing is a list of fonts that most computers come with when you get them out of the box. Because of this, it’s very likely that the user will have them, and the website will display properly if you reference them (rather than falling back on an alternative). Fonts like Helvetica, on the other hand, won’t be on every machine, since it doesn’t come with a PC. If you try to use Helvetica on your website, most PC users won’t see it displayed!

With this said, you can now technically use any font on any website. This is through a CSS rule @font-face. What this does is lets you point to the font’s location on a server, where the user can then download and use it.

There are two points of concern with using @font-face. The first is that the user has to download the font, so it adds a bit of lag to your page displaying. The second, and more crucial, point of concern is that you need to have the license of a font to use it. You can’t just upload Helvetica on your server, because somebody else owns the font. You need to buy the license from a Font distributor website like https://typekit.com/ to be able to use them like this!

As others have mentioned, there are great web services that let users @font-face fonts, like Google Web Fonts.

With all of this said, that list of web-safe fonts hasn’t changed much. If you don’t use @font-face, you should probably stick to that same list of fonts from 2003. Here’s an updated list from this year.

Hope this helps!