[SOLVED] How to add some non-standard font to a website?

How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics?

For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. But I can't find the right way to add that font on the server. And how do I include that font with CSS into the HTML? Is this possible to do without graphics?

Solution

This could be done via CSS @font-face:

@font-face is supported by all modern browsers and allows multiple format fallback references as a comma-separated list defined in the src property:

@font-face {
    font-family: "Custom Font";
    src: url("mycustomfont.woff2") format("woff2"),
    url("mycustomfont.woff") format("woff"),
    url("mycustomfont.ttf") format("truetype");
}

Multiple format fallbacks

Browsers load the first valid font file candidate specified in the src property. The fallback font-stack should therefore prioritize the most modern (and compact) – woff2 (in 2025)

woff2 has overall support by all major browsers as of 2018 (2018: webkit safari; 2016:Microsoft Edge (pre-Blink) ;2015: Firefox; 2014: Chromium )
woff has baseline support since ~2011
truetype has baseline support since ~2009–2010. Mostly relevant for "cross-media" applications such as PDF generation

Obsolete formats

These formats became deprecated or obsolete

svg – not supported by any other engine except webkit safari (Chromium dropped support ~2014). Only relevant for legacy support for homebrewing/embedded system applications (legacy console browsers, media players etc)
eot – proprietary format only supported by Microsoft ie. Only relevant for special use cases: maintaining embedded systems relying on ie

Quote enclosing

In short: Prefer enclosing.
Single or double quotes can be omitted for:

font-family names that don't include whitespace characters: font-family: Roboto but font-family: "Open Sans"
url() requires enclosing if the URL/path contains whitespace or special characters e.g # or ?
format() always requires enclosing

Format identifiers

Most browsers can apply a font without format identifiers such as format("woff2"). However, it's recommended to add these identifiers to facilitate the font parsing process. Syntax errors can break the rule/font-mapping!

Common typos are related to legacy formats where extensions don't match the identifier:

valid: format("truetype") - invalid: format("ttf")
valid: format("opentype") - invalid: format("otf")

Identifiers for "experimental" features

You may encounter format identifiers in documentations like format("woff2-variations") - these identifiers for variable fonts served a similar purpose as browser-prefixes. If most browser supports a certain feature like variable fonts – these extra identifiers are not required.