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.
This is great information that I will definitely use. Thanks!
Megan, iStockphoto.com is a great source for seamless patterns.
Frances, it looks like the background pattern at the top of your site isn’t seamless. But it looks like it could be adjusted to be seamless just by cropping it correctly.
Megan. Is that where you can see that faint box around the middle? Look at my site!! I wish I could get ride of it. Im going to see if I can click on your name and check your site out and see if it’s the same.
Great post! Do you have any suggestions on where to find seamless patterns for websites?
Thanks so much for featuring me! I truly appreciate it!