4 Font Format Used for Websites (Web Fonts)

| | Tutorial Web Design |

Web Fonts | Increasingly sophisticated browser capabilities make web designers more freely in creating, including in the use of fonts.

Since the first, by default we can use standard fonts that already exist in computer systems such as Arial or Verdana to enhance the appearance of writing on the website.

The standard fonts that are already on each computer are known as Safe Fonts or some are called System Fonts.
4 Font Format Used for Websites (Web Fonts)
But now we can use other fonts besides safe font, either it's own fonts, paid fonts and free fonts. Font-Face feature in CSS3 is very helpful in the emergence of a new term that is Web Fonts.

Web fonts have several font formats that can be used, and usually when we buy or download a web font then in the given package there are several font files with different formats.

Here are some of the best website font formats you need to know.

1. Embedded Open Type (EOT)

EOT is a legacy font format developed by Microsoft. Older versions of Internet Explorer will require EOT to render your web font.

EOT is also often presented without compression, so there is a possibility of size is large enough.
So if you do not need browser support to serve IE8 users down, then you should leave it, or do not use this type.

2. TrueType (TTF)

TTF is a font format developed by Microsoft and Apple in the 1980s. Modern TTF files are also called TrueType OpenType. TTF can be useful to extend support to some older browsers, especially on phones. If you need it then it can be included.

3. Web Open Font Format (WOFF)

WOFF was developed in 2009 as a wrapper format for TrueType and OpenType font formats. This format uses compressed fonts and is supported by almost all modern browsers currently available.

4. Web Open Font Format 2 (WOFF2)

WOFF2 is an updated version of the original WOFF format. This format was developed by Google, this format is considered the best format compared to other formats as it offers a smaller file size and better performance for modern browsers that support it.

= / =

If you target too many users using modern browsers, you will be more secure with progressive methods using @font-face in CSS3 by displaying only WOFF and WOFF2 formats.

This will give you a pretty good speed because it already applies the best compression and allows you to handle fewer files in your code.

But if the people you're targeting are using older machines or browsers, then we recommend you use Safe Font or System Font for better performance and speed reasons.

If you want to support all users, then you can add EOT and TTF formats as well into your font mix. Even fonts with SVG format can also be used, but this time SVG format has also started to be abandoned due to various obstacles, even Google Chrome has already removed support for the format.

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box