CSS3 Fonts

March 17, 2015
by Inaam Hussain

In CSS3 we can use different types of fonts as required at a time of designing something cool.

When you find your specified font then just include that font file to web servers. and that will automatically download when user needs.

Your own fonts can be defined within the CSS3 using @font-face rule.

Different Font Formats

  • TrueType Fonts (TTF)
  • The Web Open Font Format (WOFF)
  • OpenType Fonts (OTF)
  • Embedded OpenType Fonts (EOT)
  • The Web Open Font Format (WOFF 2.0)

 

Fonts  Preview

Fonts Preview

 

How To Use Font?

In CSS3 using @font-face you can defined fonts and also name that font, and then point to that font file.

see below code how to use font-face code.

CSS
@font-face {
    font-family: oswald-normal;
    src: url("oswald/Oswald-Regular.ttf"); /* Path of font file */
}

div {
    font-family: oswald-normal;
}

 

Using Bold

Using bold font file we can also use bold fonts,

CSS
@font-face {
    font-family: oswald-bold;
    src: url("oswald/Oswald-Bold.ttf"); /* Path of font file */
}

div {
    font-family: oswald-bold;
}

 

CSS3 Font Descriptors

Following attributes we can add in @font-face style.

  1. font-family (Required) : Specify name.
  2. src (Required) : Required font file path.
  3. font-stretch (Optional) : How font should be stretch (i.e : normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded ).
  4. font-style (Optional) : Style of font (i.e: normal, italic, oblique).
  5. font-weight (Optional) : Defines boldness of font (i.e: normal,bold,100,200,300,400,500,600,700,800,900).
  6. unicode-range (Optional) : Defines the range of UNICODE characters the font supports.

 

Full HTML & CSS Code

HTML & CSS
<!DOCTYPE html>
<html>
    <head>
        <style>
            @font-face {
                font-family: oswald-normal;
                src: url("oswald/Oswald-Regular.ttf");
            }

            @font-face {
                font-family: oswald-bold;
                src: url("oswald/Oswald-Bold.ttf");
            }

            div.normal {
                font-family: oswald-normal;
                font-size:20px;
            }
            div.bold {
                font-family: oswald-bold;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <div class="normal">
            Hi this is OSWALD NORMAL Fonts.
        </div>
        <div class="bold">
            Hi this is OSWALD BOLD Fonts.
        </div>
        <p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>
    </body>
</html>

 

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

2 comments

  1. |

    The font-face rule has nothing to do with CSS3: even with IE6 was possible to use web fonts.

    For the font weights and styles you don’t need to declare different font-faces rules: actually I don’t recommend this approach, as this would make the css hard to maintain.

    You can link all styles and weights with one or multiple @font-face rules, sharing the same family name: http://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/

  2. sudip
    |

    Thanks for this process

Leave a Comment