Pinterest Stumbleupon Whatsapp
Ads by Google

web page fontsIt’s been mentioned before but it’s worth repeating: if you don’t want your websites/blogs to be just another face in the crowd, you have to make it stand out from the others, and playing with the design is one way to achieve that.  But every web designer knows too well that typography is one area where their hands are pretty much tied.

The launch of Google Fonts Use Really Cool Fonts in Your Wordpress Blog With Google Font Directory Use Really Cool Fonts in Your Wordpress Blog With Google Font Directory Read More brings fresh air to the world of free web typography. But even though Google provide us with many great free-to-use fonts, the addition is still just a speck of dust among thousands (or maybe millions?) of existing fonts out there.


Meet Fonts.com, a web service that provides us with thousands of alternative web page fonts that we can use for our web/blog design – and 3,000+ of them are available for free.

Free Fine Fonts For You

Fonts.com is brought to us by Monotype Imaging, a well known name in the font industry. The company name itself is a guarantee that you will find a vast choices of fonts here. But before we can use the Fonts.com service, we should first sign up to get a free account.

web page fonts

There are three “pricing” schemes available with various features, but I personally think that the free one – with 3,000+ font choices, unlimited websites use and fonts per site, and 25,000 pageviews per month – is more than adequate for everyday bloggers and website owners. The free offer is very generous considering that Typekit – another big player in the same field – limits their users with only one website use and two fonts per site.

Ads by Google

free web fonts

Start by building a project: give it a name and add the domains that you want to use the fonts with. Don’t forget to save the project before you continue. You can create several projects to manage, but due to the pageviews limitation, I suggest you create another account for another project if your website could attract high traffic.

free web fonts

The next step is to choose the fonts for your project. You can sort by classification, designer, foundry or language support. If you know the font name, you can go directly to the search box, or – if you have plenty of spare time – you can browse all the available web page fonts alphabetically.

free web fonts

But before you do that, it’s better to take a look at the list of featured fonts.

fonts for web

The language support options will be very useful if you are looking for fonts that support non-Latin characters like Arabic or Chinese.

fonts for web

Adding the fonts to a project is as easy as clicking the “Add to project” button at the right side of the font list. If you find a font with a grey “Upgrade” button, it means that the font is only available for paid users.

fonts for web

After adding the fonts that you like to the project, you can start working on your style sheet. Go to the “Selectors” field, type a selector and click “Add selector“. Repeat the process for other selectors. A little knowledge of HTML and CSS would be very useful here, but using the basic “body” and “h1” to “hx” (change the x with any number) will do for beginners.

04a Work on style sheet.jpg

Then choose a font from the drop down list for each selector. The available fonts are the ones that we chose earlier. A preview of the font usage will appear to the right of the list.

04b Work on style sheet - choose font for header.jpg

The last step is to publish your project. Clicking on the “Publish” tab will give you four options. Beginners will want to stick with option 1.

05a Publish - Easy.jpg

While options 3 and 4 are only available for paid users.

You will get one line of code to apply on your website. Click the “Select code” button and hit Command + C (Mac) or Ctrl + C (Windows) to copy the code.

05b Publish - Select Code-1.jpg

Now let’s move to your website to apply the code.

Applying The Code

The code that you get should be pasted between the “head” tags. I’m assuming that if you have a website, you should know how to do that. However, for self-hosted WordPress blog owners, there’s an easy way to do it without having to edit any code.

Install and activate a WordPress plugin called “Insert Codes” and paste the font code inside the “Blog header” field, and save the changes.

06a Insert Codes - WordPress Blog.jpg

I tried this on my self-hosted WordPress blog and everything worked fine. The elements showed up with their new look.

web page fonts

The beauty of this system is that if you make any changes to your project inside Fonts.com, the changes will be automatically applied to your website(s) without you having to do anything.

So if you are looking for free and easy ways to play with web typography, the service from Fonts.com would be your best bet. I personally think it’s even better than the Google Font directory – at least from the number of choices that free users have.

Do you tinker with web typography? Do you know other alternatives? Please share your thoughts and opinions using the comments below.

  1. Waverly
    January 23, 2011 at 7:40 am

    Does Fonts.com no longer allow this to be done?
    I can't seem to find where I can make a new project.

  2. Waverly
    January 23, 2011 at 8:40 am

    Does Fonts.com no longer allow this to be done?
    I can't seem to find where I can make a new project.

  3. Brunomgmateus
    November 4, 2010 at 3:47 pm

    As Thurana says, the term "web-safe fonts" are a certain list of fonts that are spread out through all operating systems, browsers and devices. In theory, if you stick with them, the webpage will show up in a predictable way (if we state "Arial", "sans-serif", and the machine doesn't have Arial installed - i.e. like an iPhone - it will revert to that system's default sans-serif font.)

    Anyhow, there's currently good techniques where you don't need the services discussed on the article. As long as you have the rights to use the font files, any new browser will be able to show them, using the techniques shown in http://craigmod.com/journal/font-face/ or in http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

    The good thing is that they work. The bad thing is that they'll be taking a bigger loading time on your site, because the font file/files have to be downloaded from the server before showing the content, so use them sparingly.

  4. Brunomgmateus
    November 4, 2010 at 4:47 pm

    As Thurana says, the term "web-safe fonts" are a certain list of fonts that are spread out through all operating systems, browsers and devices. In theory, if you stick with them, the webpage will show up in a predictable way (if we state "Arial", "sans-serif", and the machine doesn't have Arial installed - i.e. like an iPhone - it will revert to that system's default sans-serif font.)

    Anyhow, there's currently good techniques where you don't need the services discussed on the article. As long as you have the rights to use the font files, any new browser will be able to show them, using the techniques shown in http://craigmod.com/journal/fo... or in http://nicewebtype.com/notes/2...

    The good thing is that they work. The bad thing is that they'll be taking a bigger loading time on your site, because the font file/files have to be downloaded from the server before showing the content, so use them sparingly.

  5. gav
    November 4, 2010 at 12:50 am

    Agreed with Aineverfail... why would you wish to promote non web-safe fonts?!?

    • Anonymous
      November 4, 2010 at 1:12 am

      Hi,

      Following my answer to Aineverfail, we promote the use of non web-safe fonts so that we could use thousands of other fonts in our web design which are otherwise unavailable. This will make our site stand out among millions of other sites which only use the so-called "web-safe" fonts.

      Please also note that "non web-safe" doesn't mean that they are not safe to be used for web. It's more like they are "safer to avoid because they might not show up correctly on computers which don't have those fonts installed." But using the service discussed in this article, that won't be the case anymore because it allows everybody to use thousands of other alternative "non web-safe" fonts.

  6. thurana
    November 4, 2010 at 2:12 am

    Hi,

    Following my answer to Aineverfail, we promote the use of non web-safe fonts so that we could use thousands of other fonts in our web design which are otherwise unavailable. This will make our site stand out among millions of other sites which only use the so-called "web-safe" fonts.

    Please also note that "non web-safe" doesn't mean that they are not safe to be used for web. It's more like they are "safer to avoid because they might not show up correctly on computers which don't have those fonts installed." But using the service discussed in this article, that won't be the case anymore because it allows everybody to use thousands of other alternative "non web-safe" fonts.

  7. thurana
    November 4, 2010 at 2:01 am

    Hi,

    "Web-safe" is just a term used to described fonts that everybody has in their computer. This is limited only to several "standard" fonts and has been used by every web designer to make sure that their design appear exactly as they want at any computer. Thus, "non-web-safe" refers to all other fonts outside that exclusive circle: the fonts which are not always present at every computer.

  8. Aineverfail
    November 3, 2010 at 11:11 pm

    Confused: are these NON-websafe as per the title?

    • Anonymous
      November 4, 2010 at 1:01 am

      Hi,

      "Web-safe" is just a term used to described fonts that everybody has in their computer. This is limited only to several "standard" fonts and has been used by every web designer to make sure that their design appear exactly as they want at any computer. Thus, "non-web-safe" refers to all other fonts outside that exclusive circle: the fonts which are not always present at every computer.

Leave a Reply

Your email address will not be published. Required fields are marked *