Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2019

## Font - Include through link element

Using a `link` element to include CSS with `@font-face` definitions is how some font hosting services recommend including their fonts. Google Fonts does this.

The server delivering the fonts does browser detection and delivers the CSS file with the appropriate font format.

- Example: Google Fonts

Note that we are having using two Google Fonts -- Cabin Sketch and Cabin.

    <link rel="stylesheet"
      href="http://fonts.googleapis.com/css?family=Cabin+Sketch|Cabin"
      type="text/css" />

Our CSS:

    h1,h2,h3,h4,h5,h6 {
      font-family:"Cabin Sketch", sans-serif;
    }

    h1 {
      font-size:3em;
    }

    h2 {
      font-size:2em;
    }

    body {
      font-family: Cabin, serif;
    }

Note that nothing magical is going on here -- Google is simply returning CSS that uses `@font-face` with the font format appropriate for the browser making the request.

    /* latin */
    @font-face {
      font-family: 'Cabin';
      font-style: normal;
      font-weight: 400;
      src: local('Cabin Regular'), local('Cabin-Regular'), url(http://fonts.gstatic.com/s/cabin/v8/4VMQLG5UaE3m5rr_emmAqaCWcynf_cDxXwCLxiixG1c.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
    }
    /* latin */
    @font-face {
      font-family: 'Cabin Sketch';
      font-style: normal;
      font-weight: 400;
      src: local('Cabin Sketch Regular'), local('CabinSketch-Regular'), url(http://fonts.gstatic.com/s/cabinsketch/v8/d9fijO34zQajqQvl3YHRCRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
    }

Copyright © David Heitmeyer