CSS Web fonts

CSS Web fonts allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

You will have a @font-face block at the start of the CSS, which specifies the font file(s) to download:

@font-face {
  font-family: "myFont";
  src: url("myFont.woff");
}

CSS Web fonts-Rules

1. Browsers support different font formats, so you’ll need multiple font formats for decent cross-browser support.
2. Fonts generally aren’t free to use. You have to pay for them, and/or follow other license conditions such as crediting the font creator in the code.
3. Web fonts as a technology have been supported in Internet Explorer since version 4

CSS Web fonts-Formats

OpenType Fonts (OTF)

It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.

The Web Open Font Format (WOFF)

Created for use on the web, and developed by Mozilla in conjunction with other organizations, WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts. This format can also include metadata and license info within the font file. This format seems to be the winner and where all browsers are headed.

WOFF2 is the next generation of WOFF and boasts better compression than the original.

Embedded OpenType Fonts (EOT)

EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

SVG Fonts/Shapes

SVG is a vector re-creation of the font, which makes it much lighter in file size, and also makes it ideal for mobile use. This format is the only one allowed by version 4.1 and below of Safari for iOS. SVG fonts are not currently supported by Firefox, IE or IE Mobile. Firefox has postponed implementation indefinitely to focus on WOFF.

SVGZ is the zipped version of SVG.

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-heught: 24px;
  padding: 50px;
}