How to use fonts in your Web Site with CSS and @font-face rule

Embedding Fonts in your Web Site

The @font-face rule allows custom fonts to be loaded on a webpage. Adding @font-face fonts to your Web site is not that difficult.

When you have found/bought the font you wish to use, first, you need to download some @font-face kits. Create a folder named “fonts” and place the myfont.eot and myfont.ttf files into the folder just include the font file on your web server. Then open your style sheet and add the following:


@font-face {
      font-family: 'MyWebFont';
      src: url('../fonts/myfont.woff2') format('woff2');

Then use it to style elements like this:

body {
      font-family: 'MyWebFont';

and it will be automatically downloaded to the user when needed.

  1. Other things to be considered:
    The @font-face rule should be added to the stylesheet before any styles:

    @font-face { 
          font-family: 'MyWebFont'; 
          src: url('myfont.eot'); /* IE9 Compat Modes */ 
          src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
          url('myfont.woff2') format('woff2'), /* Super Modern Browsers */ 
          url('myfont.woff') format('woff'), /* Pretty Modern Browsers */ 
          url('myfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
          url('myfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
  2. To uncheck the checkbox if value is = to a variable for instance “test” you can do this:
    TrueType Fonts (TTF)TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.

    OpenType Fonts (OTF)

    OpenType is a format for scalable computer fonts. 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)

    WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

    The Web Open Font Format (WOFF 2.0)

    TrueType/OpenType font that provides better compression than WOFF 1.0.

    SVG Fonts/Shapes

    SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

    Embedded OpenType Fonts (EOT)

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

Reference links:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s