Fonts – The Smithy

Source: awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face

Basically, there are two implementation models:

2. Embedding fonts using the @font-face rule

Web font embedding services

Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers. One of the most valued characteristics of GWF is the option to download a desktop version of the fonts for use in the project design phase.

Implementation

1. Choose a font. You can add it to your collection or use “quick-use” to generate the code and options for that font.

2. Copy and paste the code generated into your <Head>.

  <head>
    <link rel="stylesheet" type="text/css"   href="http://fonts.googleapis.com/css?family=Tangerine">
  </head>

Or import into your css stylesheet:

@import url(http://fonts.googleapis.com/css?family=Tangerine);

3. The font is now accessible in your CSS code

      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }

Advanced url construction:

base URL:
```
http://fonts.googleapis.com/css
```

add family parameter.
Note: replace spaces with + sign
```
http://fonts.googleapis.com/css?family=Droid+Sans
```

Separate multiple font families with a pipeline (|)

http://fonts.googleapis.com/css?family=Droid+Sans|Inconsolata

Specify styles or weights using the colon (:)
italic -> italic or i
bold -> bold or b, or a numeric weight such as 700
bold italic -> bolditalic or bi
```
http://fonts.googleapis.com/css?family=Droid+Sans:b|Inconsolata
```

Specify script subset(s) by adding the subset parameter

http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

Optimize font requestsIf you only use the font for a small text, it is a good idea to specify the text. As with all query strings, you should URL encode the text.
```
http://fonts.googleapis.com/css?family=Inconsolata&text=I%20Robot
```
Note: there’s no need to specify the subset= parameter when using text= as it allows you to refer to any character in the original font.

Embedding fonts using the @font-face rule

Fonts are hosted on the user’s server independently of external services. @font-face was a deprecated CSS2 rule that has been re-introduced in CSS3 specifications and is supported by almost all modern browsers.

A web font is a customized font which is supported by different browers and comes in formats such as TTF, WOFF, EOT and SVG.
FONT SQUIRREL (free) offers prepackaged @font-face kits with the required formats, CSS and HTML code and the “@Font-Face Generator” tool.

1. Select your favorite font from Font Squirrel.

2. Download the @font-face kit and test the sample code in stylesheet.css and demo.html files. All the font formats must be uploaded to your server.

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