Using webfonts : google & @font-face

§

There are several ways to use non-system fonts on a website.

I enjoy using google web fonts & @font-face css rule as these two options are quick & convenient.

Google Web Fonts and @font-face rule

Basically, there are two implementation models:

1. Embedding fonts using @font-face rule (locally hosting your own fonts)


@font-face { font-family: 'MyWebFont'; 
src: url('webfont.eot'); /* IE9 Compat Modes */ 
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }

2. Using Web font embedding services  (google web fonts)

Web font embedding services

Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers. GWF is free to use, does not require you to have an account and has no limit on traffic or domains as in the case of Typekit, which sets the cost of the service according to the number of domains in which the font is used or the site’s monthly traffic. One of the most valued characteristics of GWF is the option to download a desktop version of the fonts for use in the mockup phase of projects.

Implementation

As mentioned above, using them is really quick and simple:

1. You 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="https://fonts.googleapis.com/css?family=Tangerine">
  </head>

3. The font is now accessible in your CSS code

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

Here you can consult a extended manual for styles, script subsets and using multiple fonts.

Top recommended fonts from Google Web Fonts

You will find many criticisms of the quality of GWF’s fonts and the amateurish nature of many of these typefaces. Google fonts is a collaborative open source project but many people think there should be a higher level of quality control.

    • Open Sans

       

      webfonts_google_fontface_opensans

 

  • Josefin Slab

     

    webfonts_google_fontface_josefinslab

     

  • Arvo
  • Lato
    webfonts_google_fontface_lato
  • Vollkorn
    webfonts_google_fontface_vollkorn
  • Abril Fatface
    webfonts_google_fontface_abril
  • Ubuntu
    webfonts_google_fontface_ubuntu
  • PT Sans + PT Serif
    webfonts_google_fontface_pt
  • Old Standard TT
    webfonts_google_fontface_old
  • Droid Sans
    webfonts_google_fontface_droid

Embedding fonts using @font-face declaration

In this case 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 nearly all modern browsers.
A webfont is a customized font to be used for @font-face embedding in formats supported by the different browers likeTTF, WOFF, EOT and SVG file.
There are many fonts available for @font-face embedding but we are going to give a selection of the webfonts available on FONTSQUIRREL, which are free to use and include a prepackaged @font-face kits with the required formats, CSS and HTML code. Fontsquirrel also offers the fantastic “@Font-Face Generator” tool, which can convert your desktop font into the appropriate format so you can use it as a webfont.

Implementation of webfonts with @font-face declaration

1. Select your favorite font in Fontsquirrel.

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;
}

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: ,

카테고리:

Ω

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *