CSS3 Fonts

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)

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.


@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,


@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

Mukul K

Mukul Kandhari is an internet marketer, SEO, and web developer with a passion for programming.