This is going to be
the fifth post in a series of posts regarding HTML 5. You can find
the other posts here, here , here and here.In this post I will provide a hands-on example on how to use real fonts in HTML 5 pages with
the use of CSS 3.Font issues have been appearing in all websites and caused all sorts of problems for web designers.
The real problem with fonts for web developers until now was that they were forced to use only a handful of fonts.CSS 3 allows web designers not to use only web-safe fonts.These fonts are in wide use in most user's operating systems.Some designers (when they wanted to make their site stand out) resorted in various techniques like using images instead of fonts. That solution is not very accessible-friendly and definitely less SEO friendly.CSS (through CSS3's Fonts module) 3 allows web developers to embed fonts directly on a web page.First we need to define
the font and then attach
the font to elements.Obviously we have various formats for fonts. Some are supported by all modern browsers and some are not.
The most common formats are, Embedded OpenType (EOT),TrueType(TTF),OpenType(OTF). I will use
the @font-face declaration to define
the font used in this page. Before you download fonts (in any format) make sure you have understood all
the licensing issues. Please note that all these real fonts will be downloaded in
the client's computer.A great resource on
the web (maybe
the best) is http://www.typekit.com/.They have an abundance of web fonts for use. Please note that they sell those fonts.Another free (best things in life a free, aren't they?) resource is
the http://www.google.com/webfonts website. I have visited
the website and downloaded
the Aladin webfont.When you download any font you like make sure you read
the license first. Aladin webfont is released under
the Open Font License (OFL) license. Before I go on with
the actual demo I will use
the (http://www.caniuse.com) to see
the support for web fonts
from the latest versions of modern browsers.Please have a look at
the picture below. We see that all
the latest versions of modern browsers support this feature. In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to
the excellent interactive tutorials of W3School.Another excellent resource is HTML 5
Doctor.Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if
the browser supports HTML 5 and CSS 3 features is to use
the Javascript lightweight library Modernizr.In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.I create a simple HTML 5 page.
The markup follows and it is very easy to use and understand<!DOCTYPE html><html lang="en"> <head> <title>HTML 5, CSS3 and JQuery</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"> <h1>Learn cutting edge technologies</h1> <p>HTML 5, JQuery, CSS3</p> </div> <div id="main"> <h2>HTML 5</h2> <p> HTML5 is
the latest version of HTML and XHTML.
The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses
the needs of Web Applications, an area previously not adequately covered by HTML. </p> </div> </body> </html> Then I create
the style.css file.<style type="text/css">@font-face{font-family:Aladin;src: url('Aladin-Regular.ttf')}h1{font-family:Aladin,Georgia,serif;}</style> As you can see we want to style
the h1 tag in our HTML 5 markup.I just use
the @font-face property,specifying
the font-family and
the source of
the web font. Then I just use
the name in
the font-family property to style
the h1 tag.Have a look below to see my page in IE10. Make sure you open this page in all your browsers installed in your machine. Make sure you have downloaded
the latest versions. Now we can make our site stand out with web fonts and give it a really unique look and feel. Hope it helps!!!
