In my last article I looked at some of the top font services and the advantages of each. In this article I’m going to dig a little deeper and show you how to add a @font-face font to your web page and apply some customisations using CSS.
Also, in May Laura covered how to setup your web page with a font from Google Web Fonts; in this article I won’t show you how to use a font service again but instead how to get a font that you’ve purchased and downloaded onto your website.
In my last article I looked at some of the top font services and the advantages of each. In this article I’m going to dig a little deeper and show you how to add a @font-face font to your web page and apply some customisations using CSS.
Also, in May Laura covered how to setup your web page with a font from Google Web Fonts; in this article I won’t show you how to use a font service again but instead how to get a font that you’ve purchased and downloaded onto your website.
Step One
Let’s say we’re building a newspaper website, I’ll use the Super Awesome Times example layout from Zurb. As you can see they’ve chosen an old medieval-style font for their headline, although it’s nice I’m going to change that to Molot from FontSquirrel – as I mentioned last time, FontSquirrel’s a service which gives you ready-made font kits for your website.
Once you have chosen the font you want you click the @font-face Kit tab, you will then be presented with a couple of options. Make sure you have all four font formates selected (TTF, EOT, WOFF and SVG); once you’re happy with that click the Download @font-face Kit button and unzip it’s contents onto your computer.
Step Two
Next you will need to move the four font files (Molot-webfont.ttf, Molot-webfont.eot, Molot-webfont.woff and Molot-webfont.svg) that are inside that .zip file to where you’re developing your website.
Step Three
Next we need to identify where the title is in the HTML. If we inspect the title area (or view the source code) we’ll see that the title is currently an image, centered inside a <div> with the ID of masthead.
As we can also see in our HTML the title isn’t actually anywhere on the page in text, which is pretty bad for search engine optimisation (SEO); so before we can change the font we need to add the title to our markup, find the title image in the HTML (called super-awesome-times.png) and insert this just after the image:
<h1>The Super Awesome Times</h1>
Step Four
Now we need to hide that title image. We can also see using the web inspector that the CSS for the title image is located on line 192 inside a <style> tag in the HTML, so lets open the index file and make some changes to that CSS.
To start with the CSS around line 192, it will look like this:
div#masthead img { margin-bottom: 27px; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.75)), to(rgba(0,0,0,1))); }
and we can see here it’s specifying the CSS for the masthead title image, let’s just delete this line. So now your title area should look something like this:
Also remember to delete the image from the HTML too, which is located on line 313.
Step Five
Next we want to get this font loaded into your page, open the stylesheet.css file from your FontSquirrel Kit and you should see the following CSS:
@font-face {
font-family: 'MolotRegular';
src: url('Molot-webfont.eot');
src: url('Molot-webfont.eot?#iefix') format('embedded-opentype'),
url('Molot-webfont.woff') format('woff'),
url('Molot-webfont.ttf') format('truetype'),
url('Molot-webfont.svg#MolotRegular') format('svg');
font-weight: normal;
font-style: normal;
}
This is the @font-face declaration, we’re going to copy this CSS and then paste it into the web page before the line 192 in the CSS.
Now, add the following to the CSS after line 192:
div#masthead h1 {
font-size: 60px;
line-height: 68px;
font-family: 'MolotRegular', Arial, sans-serif;
letter-spacing: 0;
text-align: center;
}
Here we have given the title a size of 60 pixels and a line height of 68 pixels, then the font-family decleration is the key, the first font is ‘MolotRegular’ which is the font from our font kit; then after ‘MolotRegular’ we’ve added Arial as a fall-back font, this is so when someone’s using a very old browser which doesn’t support the modern @font-face features it will load Arial instead. Then I’ve given the heading zero letter spacing and also centered the text.
You can also use this short-hand version of the CSS, which will save a bit of space in your file and have the same results:
div#masthead h1 {font: 60px/68px 'MolotRegular', Arial, sans-serif; letter-spacing: 0;text-align: center;}
Now your web page should look like this:
Step Six and Beyond
CSS is a great tool for controlling text on a web page, now with some new features in CSS3 you can almost control the text as much as you can in a print publication.
I’ll show you a few new tricks you can try out. First lets try an effect to rotate the text, add this code to the end of div#masthead h1 in your CSS:
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
transform: rotate(-1deg);
padding-bottom: 15px;
You’ll notice the first two are prefixed with -webkit- and -moz-, this is because the rotate effect in CSS3 is so new that it’s not fully supported in all browsers yet. Make sure you add in these browser-prefixes for now but at some point in the future all the browsers will hopefully support everything from CSS3, and when that happens it will be safe to remove those lines.
Now lets add a CSS3 Text Shadow, to create a shadow in text, the CSS is written text-shadow: A B C #XXX where A is x-axis, B is y-axis, C is the cast length/feathering and #XXX is the colour as usual. Add this code to the end of div#masthead h1 in your CSS:
text-shadow: 3px 5px 3px #c4c4c4;
Which will have results that look like:
Play around with the x-axis, the y-axis and the cast length to get the best results.
Want to learn web design?
If you want to learn how to make your own website, you can do so at Web Courses Bangkok! Use any contact form on our site and we will get back to you.
