Last week I explained how to enhance to look of your site using fonts. One tip I briefly discussed was to embed a font onto your blog. These are non-standard fonts that are stored on your websites hosting server.
Why Should I Embed a Font? Embedding a font makes sure that your audience is seeing the special font that you want them to see as opposed to a standard, and sometimes boring, web-safe font. Its great for SEO but does involve a little bit of programming knowledge.
Embed A Font
How do I go about embedding a special font on my site?
There are several companies that have web fonts you can use.
Some web font sites keep the font on their servers so you dont even need to store it on your own which is great for Blogspot users who most often dont have an external hosting provider.
- Google Web Fonts: Select a font from their list and add a line of code (you can copy and paste it from the instructions) to your site. Then simply use the new fonts name when styling whatever elements you want to have the new font. Oh, and its FREE!
- Fonts.com has over 10,000 fonts to choose from and works similarly to Google Web Fonts. The free plan gives you access to 3000 fonts but you have to have 25,000 or less pageviews a month and put a badge on your site. The paid plans start at $10/mth.
- TypeKit works the same as above for most users but it has some special features for WordPress.com including 10 free fonts that you can use on your WP.com site without any coding whatsoever, and a handy settings menu built-in to the WP.com dashboard. They have both free and pay plans. The free plans have a limited selection and you have to have under 25,000 monthly pageviews.
Other sites offer @fontface kits. These are a package of all the file formats you will need to upload onto your external hosting provider as well as all the code you will need. Here are instructions on how to install the kits. (Dont click here if seeing code makes you pass out!)
- Font Squirrel has hundreds of free fonts. Many are the same as the ones that you can find at free font sites like dafont.com. You can download the font in a TrueType format as well to use on your computer.
- Myfonts.com sells kits starting at $15 for the web kit and a copy of the font that will work on your computer. They have over 30,000 to choose from and some great online tools that will make finding the right font easier for you.
I love my font but I cant find a web font version of it. Can I make one?
Maybe. Font Squirrel does have a @fontface kit generator but the font youre using must be a TrueType file format (.ttf) and you must legally own the font. You also need to check the license for your font to ensure that it can be used as a web font.
Are there any other ways to use a non-standard font on my site?
- You can certainly create some items on your website as graphics. If you missed last week’s post you should read about why graphics aren’t as good an option as embedding.
- There’s another option called Cufon that comes with some popular WP themes. Here’s a discussion on why not to use Cufon.
- sIFR is another option that replaces the chosen text with a Flash object that uses your chosen font. Since Apple does not support Flash on the iPhone or iPad (and it doesn’t work well on Android), using any Flash on your site runs you the risk of it not functioning for much of your audience.
Now go express your creativity by adding some new fonts to your blog!
Renee Deming is the owner of the graphic design and web company Studio Bold, wife of an extremely supportive husband and mother of two amazing little men. She eats, sleeps and breathes design. She lives for logos and loves making websites and blogs go from good to great! She also blogs at boldmom.com where she features amazing parent entrepreneurs who manage to grow a business while raising a family.
It is great to have the option to put in many type(s) of fonts and you have a fantastic resource of information here. Just keep in mind that each of our own sites are presenting an image to the reader and one should not get too carried away on many different fonts. Stick with a theme as it will make the site look better. Again thanks Laurie for the info and I will use it.
Nowadays Google Web fonts is an easy way to add more font options to your web designs, without having to revert to images. And it is really easy to use.
Having recently migrated to a hosted blogging site (read: WordPress.com ;D), Since I no longer have control over what can be hosted, I thought that I would be reserved to using the same web-safe fonts (like what, 5?!) that, quite frankly, don’t fit every single design. Before I found this page, I had absolutely NO idea that there were sites that hosted fonts that could be specifically linked. o_O So thank you so very much for all the great resources listed here. Though I’m still an amateur at web design, it’s nice knowing that I no longer have to limit my creativity to Lucinda and Verdana! 😉