A big part of great design is great typography. But when it comes to web design, this can become difficult. There are only a few generic fonts such as Arial and Times that are deemed “web-safe”. Anything else, and you can’t be sure that the user has it installed on their computer and it will display properly. Most people just use images. But this causes problems from an SEO standpoint, and increases site loading times, and is unrealistic for body content. That’s why I’m going to show you a better way.
The answer lies in CSS3’s @font-face.
It’s very simple, all you need to do is upload your font files to your server, add a few lines of code in your CSS file, and you’re ready to go! That is how many helpful services such as Google web fonts and TypeKit work. While they are nice, their font supply is limited, you may have to pay for the service or you may have their watermark on your site. Why not just do that yourself? Here’s how.
Convert your font to .ttf (for most browsers), .eot (for Internet Explorer), and .svg (for mobile browsers) using a service like Font2Web.
Upload your these three font files to your server.
Insert this code into your style sheet.
@font-face {
font-family: ‘your-font’;
src: url(your-font.eot’);
src: url(your-font.woff’) format(‘woff’),
url(your-font.ttf’) format(‘truetype’),
url(your-font.svg’) format(‘svg’);
}
h1 (or whatever element, class, etc. you're applying it to) {
font-family: your-font;
}
Enjoy your beautiful custom now web-safe fonts!
Note: Be sure you have the proper license to do this. A good place get fonts free for commercial use is Font Squirrel.
Well, it looks like you’ve already gotten your first backlink from a self-allegedly crapy webmaster. Congratulations, that’s something I’ve never managed to achieve. 😀
No seriously, this is really good content. I’ve always used Google Fonts up to this point but you’ve taken it a step further!
Is this compatible in all IE versions?
You’re welcome to use whatever colors you wish here, but I think I’d give the link colors a bit of coloring (maybe reverse the a and a:hover colors?) Bloggers use bold prose to emphasize a point, and most readers might not know it’s anchor text here. Just my two pennies.
Hey! Thanks. Yeah, I thought that name was pretty weird. It turns out, he does like hundreds of those a day, and probably nobody reads it.
I tested it with http://ipinfo.info/netrenderer/ and it works in Internet Explorer version 7 and later.
Good point, I’ll do something about that.
I’m sure that guy is automating that stuff. He’s got a robot doing google searches of sites in his niche and dynamically pulling the RSS feeds to show excerpts on his site. It’s a lousy way to build a business. Lol.
Hi Daniel,
I have just started using the Genesis framework for the 1st time, and think this is one of the best themes I’ve seen, certainly for my needs, paid or otherwise.
I have found that these custom fonts are stripped out in IE8 (didn’t notice at first as I use firefox mainly).
DOn’t like to ask to many questions, as it’s an excellent free theme you are offering, but how have you got a logo to display instead of text in the header, as I have tried following the Genesis instructions of uploading the logo.png and changing this in the settings, but this results in no logo or text been displayed.
I have noticed that you use a logo on this example?
Any help appreciated, but keep up the wonderful work!
Jon
Update: I have now got the fonts to display correctly in IE8, I had to add a little extra code which was in the css thrown out of http://www.font2web.com/ after converting a font.
Can’t work out the image logo though?
I’m sorry the custom font isn’t working correctly in IE. I use a Mac, so I have to rely on web services like http://netrenderer.com/. I’ll have to get that working on the theme.
If the Genesis custom header function isn’t working correctly, you can just go into your stylesheet and add these lines to #title-area
background: url(images/logo.png);
text-indent: -9999px;
Just put your logo with that name in /images of course and be sure it’s the right width/hight or edit the width and height of the element.
Don’t worry about asking to many questions; that’s fine. I’m glad you like the theme. 😉
Thanks for the reply Daniel.
I did get it working quite easily using this code (I think a small part of this is missing in your css, but heh, I only got this from the resources you suggested:
@font-face {
font-family: ‘MYFONTNAME’;
src: url(‘MYFONTNAME.eot’);
src: local(‘☺’), url(‘MYFONTNAME.woff’) format(‘woff’), url(‘MYFONTNAME.ttf’) format(‘truetype’), url(‘MYFONTNAME.svg’) format(‘svg’);
}
Thanks for the tip on the header logo. I was going to replace the font with an image, but I now like the fact I can use these custom fonts, so I may stick with that.
I’m enjoying working with your theme, it’s so clean. I’m finding a few tweaks are required but that’s the fun bit. I’ll send you the link when I finished and be sure to credit you 🙂
This is such a great resource, Daniel. I’m finding myself coming back to your articles. That Font2Web site is magical — and like Jon says above, they even provide you with the CSS to implement the new font on your site. Saves a ton of Photoshop work, and the fonts come out cleaner than they otherwise would. I’m loving this.
Thanks, Martyn. Yes, Font2Web is an extremely helpful site! I don’t understand why that happens, but yeah, text is always more crisp than a regular jpg or png image.
If you do this can people not view the source of your webpage and find the url to your font files. If they download them could you be in trouble for file sharing?
That is always a possibility if you’re using premium fonts, so I recommend only using fonts you can download for free.
Browsers showing the tickness of fonts (PT Sans) unproportionally… Maybe this is a bug of Font2Web?
I don’t know why exactly that would happen. Have you compared what shows in the browser to the .ttf file?
That is why .ttf file seemed differently in other browsers and I see the differences… browsers show .ttf file different (more accurate).
Yes! Finally something about computers.
Hi,
I have a number of fonts (i.e. bold and italic version of the normal font) that I’d like to use.
How do I reference those in the CSS?
Eloise
You’ll need to locate the .ttf font file on your computer. This process will vary based on your OS, I’ll have to refer to Google on that one.
Hi there,
Thanks for the great advice. My question is: if I want to make my new web-safe font appear on a blog, in this case powered by Blogger, where the server is not my own, where do I upload the files?
The blog belongs to a friend of mine and she does have her own domain name for it rather than the standard generated blog address; is there any possibility of uploading the fonts through whatever hosts that domain at all? (Sorry if this is a silly question; I’m a real rookie at this stuff!)
Just wanted to say thanks for the article. I’m sure there’s plenty of info about this stuff on the web but yours was simple and well explained. 🙂
Getting this excellent blend eliminates problems and allows you to probably the most money
each hour.
What’s a good online server to use? I tried using WordPress, but I got an error message for .oet, .ttf and .woff file types saying they couldn’t be uploaded for security purposes - so I’m looking for an alternative? Thanks!
It was a very different blog than the usual ones I visit. Thanks for sharing. big thumbs up for making such wonderful blog page https://justpaste.it/3prb8.
Didn’t work for me, can’t figure out why that is.