If the thing you are making resembles a blog, custom fonts are nice but not essential. As a rule of thumb, I am sure 50% of users will not notice what font you use. If a person with an odd setup sees your thing with their system default font, they have completed their user journey successfully.
There are other uses of fonts, such as icon fonts where it is worth having a very good level of support; as technical failure would break user journeys.

There are multiple font storage formats for web work [1] :

  • .woff2 [2] (Web Open Font Format) supported by: Chrome 36+ desktop, Chrome Android, Safari 10+ IOS, Firefox desktop, Safari 12+ desktop, Samsung internet, UC browser, Edge 14+, and other rare mobile browsers
  • .woff (Web Open Font Format) supported by: Chrome 5+ desktop, Chrome Android, Safari 5.1 IOS, MSIE 9+, Safari 5.0+, blackberry 7.0+, Android 4.4+, and Opera 11.5+ and other rare mobile browsers
  • .eot (Embedded OpenType) supported by [3]: MSIE 5+

Deprecated formats

  • .ttf (TrueType Font) supported by: Firefox, Chrome, Mac Safari, Android 2.2+, blackberry 7.0, IOS Safari 4.2+ and Opera, MSIE 9+ [4], Edge, “Android browser” and other rare Android browsers
  • .otf (OpenType Font) supported by: Firefox, Chrome, Mac Safari, Android 2.2+, blackberry 7.0, IOS Safari 4.2+ and Opera
  • .svg (Scalable Vector Graphics) supported by: Chrome 4.0+, Safari 3.2+ Opera 9+, Android 3.0+, iphone 3.1+, and blackberry 7+

[1] I am ignoring the option of MSIE inside a phone; it is too niche.
[2] This newer version of WOFF has better compression 1
[3] If you have a business requirement for really old copies of MSIE, add EOT format in addition. This is not needed for the common internet.
[4] Depends on the font. MSIE is respecting “installable flags” 2. There are tools 3 to adjust this flag, but please read your fonts terms and conditions before using these tools.

There are many other options targeting print media. Most annotations on browser support taken from 4 5 6 7 8. As ever, work out who your users are, and support the right technology for them; is more important than these market percentage sizes.

Therefore a font-face command to support all “reasonable” browsers looks like (>97% of market):

@font-face {
    font-family: '$englishname';
    src url('$name.woff2') format('woff2'),
        url('$name.woff') format('woff');
    font-weight: normal;
    font-style: normal; 
 }

That sample is derived from my working knowledge of CSS, but I reference 1 for adjacent details. A more wide support example looks like (>99% of market):


@font-face {
    font-family: '$englishname';
    src: url('$name.eot');
    src: url('$name.eot?#iefix') format('embedded-opentype'),
         url('$name.woff') format('woff'),
         url('$name.ttf') format('truetype'),
         url('$name.svg#$englishname') format('svg');
    font-weight: normal;
    font-style: normal;
}

When dealing with fonts, please ensure that you have a licence to use it. Unlike CSS itself, a font is categorised as a graphic. The fonts on my site are Ubuntu, which under opencommons2 and Open dyslexic which is MIT licence.

As you can see, the CSS has gotten much simpler since v1 in 2012. You can convert a TTF (as you will find on your desktop) to a WOFF with 1 2 There are plenty of font libraries. If you have a small WOFF2 font, and you need to aggressively reduce 'time to first click' [the most relevant page load metric], it is possible to inline fonts using 3. With the speed optimisation, investing in HTTP2 is probably more useful. An alternative use-case would be an awkward CMS that didn't allow upload of fonts. There is a rentable test tool, which has a feature for fonts 4; if you are doing branding at scale.
[from first article] Care must be taken with line endings, as MSIE seems to work erratically when the above CSS is compressed. I don't have the specific edgecases listed, but this did break my font selection. The failure is listed in 5 and on stackoverflow, but also they don't have the edgecases. This discussion 6 7 seems useful (mostly that it gives a chain of events, rather than a bald “not wurkin'"). This last paragraph is the most important section in this resource.

There are opensource tools which one may download, fontforge 8 specifically.

Some similar articles in images

Some similar articles in uitools