Changing body fonts
Changing fonts in the templates can give the design a very different look. For a long time, the selection of fonts to use on websites has been limited to a few standardized “web-safe” fonts. But this is no longer the case, there are ways to include own fonts like @font-family – a topic for a future post for sure. But I am still sticking to the basic and most common fonts, and I want to show how the fonts are handled in most of the templates on this site.
It’s all in the <body>
Most often, I define a default font for the template in the CSS definitions for the body tag. For example, in the Daleri Single template the CSS for the body tag looks like this:
body {padding:0; margin:0; font:76% verdana,tahoma,sans-serif;
background:#1a1a1a url(bodybg.jpg) top center no-repeat;
color:#444; border-top:4px solid #444; text-align:center; line-height:1.5em;}
The part handling the font is:
font:76% verdana,tahoma,sans-serif;
The percentage sets the size, and the comma-separated list after that sets the desired fonts in order of priority. If Verdana is available in in the browser, then it is used. If Verdana is not available, then Tahoma is used. If neither Verdana or Tahoma is available, the default sans-serif font is used.
If I would want to use another font, for example Georgia, it can be done by simply editing the font titles to “Georgia,Times New Roman,serif”. This affects all text on the page, unless font styles are defined specifically for other tags. One of example can be that the default font is set to Verdana but all headers use the Georgia font.
Read more…
To learn more about how fonts are handled in CSS, I recommend reading W3Schools font page. To dive into more advanced CSS font options, CSS3.info can be a good starting point. And finally, W3.org has a lot of reading material to study and learn from.
This article was written by Andreas Viklund
Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.
5 comments:
In my template “Dark heavy” I used another font that is not common. I have use the @font-family in the template, which you could use for the next tutorial.
Greetings!
Hello,
Greate post, thank you.
I play with fonts and find more font properties that is available in CSS3.
My favorite is – text-shadow.
It’s hard to read usual text with this property, but captions looks greate.
Regards
CSS3 properties are really interesting. I have used text-shadow in one template to make white header text more visible on a yellow background image. Browser support for it is not optimal (yet), but it can definitely be used to improve the visual design. I will be using it more in the future for sure (as well as using imported fonts through @font-face).
Font squirrel has @font-face packs, which I am using. It works in IE 7+, and everything else. Font weight will be way off in IE (too heavy) and in safari (too light), but that is pretty far out of the designer’s control.
How if we want to use unique font that may not be installed on any computer, but I want the font still displayed?