Using real fonts in HTML 5 & CSS 3 pages
Posted
by nikolaosk
on ASP.net Weblogs
See other posts from ASP.net Weblogs
or by nikolaosk
Published on Sun, 16 Sep 2012 19:59:00 GMT
Indexed on
2012/09/16
21:39 UTC
Read the original article
Hit count: 577
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!!!
© ASP.net Weblogs or respective owner
