Web Development

CSS3 Web Fonts

CSS3 Web Fonts is the section 6 of Basics of CSS3.

As you all know we can have different font families on our web page. Having a good font type appropriately, makes your paragraph or heading looks more cooler.

If you can remember we mentioned what is meant by serifs in our CSS Beginners Guide tutorial. Also we told you when to use serif fonts and when to use san-serif fonts in that section. By using the font-family property you can mention what type of font; such as Times New Roman, Verdana or Luicda, you needed to display on the element text. Those fonts are most commonly used fonts. We called them “web-safe” fonts as almost all devices have this font installed. But there are many other fonts you can get from third parties and used on your web page. But the problem with those third party fonts are, they are not installed in every device. As we cannot predict what kind of user is going to look at our web page on the internet, most probably he will not have that third party font installed on their device. So he will not be able to see our web page exactly as we designed.

So here comes the CSS3 into action with the Web Fonts. Web fonts allow Web designers to use fonts that are not installed on the user’s computer. With CSS3 web designers are no longer force to use web-safe fonts now. When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed. Having a unique font which is rarely seen can make your web site looks more unique. Your “own” fonts are defined within the CSS3 @font-face rule. Before learning the usage of this property you must understand what kind of different font formats are available upto now.

Different Font Formats

But remember most of the font formats are not working on all browsers. But some like TTF, OTF and WOFF fonts are working in almost all browsers.

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.
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.

Font Face Rule

 

Let’s see how to use the font you want on your web page.  In the CSS3 @font-face rule you must first define a name for the font , and then point to the font file. As a standard practice we recommend you to use lowercase letters for the font URL always. Look below to see how the syntax goes.

[code language=”css”] @font-face {
font-family: myNewFont;
src: url(mynewfont_normal.woff);
}

div {
font-family: myNewFont;
}
[/code]

But the problem comes when you want to add a bold text or an italic text or any other style. To have that you must add another @font-face rule containing descriptors for the style you needed.

In the following example the file “mynewfont_bold.woff” is another font file, that contains the bold characters for my new font. Browsers will use this font file whenever a piece of text with the font-family “myNewFont” should render as bold. This way you can have many @font-face rules for the same font. Look at the syntax of it.

[code language=”css”] @font-face {
font-family: myNewFont;
src: url(mynewfont_normal.woff);
}
@font-face {
font-family: myNewFont;
src: url(mynewfont_bold.woff);
font-weight: bold;
}

div {
font-family: myFirstFont;
}
[/code]


In this section we coverup the usage of fonts in css3. Here we learned that, now on we do not need to always depend on the fonts which are commonly seen. We can experiment with our own hand made fonts in our web pages. This is all about font topic of our CSS3 tutorial. In the next few sections we are going to talk about transformations.

WHAT’S NEXT?

See what is CSS3 Transformers in 2D.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

1 Comment on "CSS3 Web Fonts"

Notify of
avatar
Sort by:   newest | oldest | most voted
Jay
Guest

Thanks for finally writing about > CSS3 Web Fonts –
Let’s Design n DevelopLet’s Design n Develop < Loved it!

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW