DivitoDesign

Everything for the Web Professional

Fonts on the Internet: What Are Our Options?

August 13, 2008 14 Comments →

Let’s have some typography talk now. We will talk about the fonts you could use on the internet. Fonts that are safe to use in your website to produce a quality layout with the fitting typography choices.

Why safe?

I realize myself almost every day there are so many awesome fonts out there. A couple weeks back I looked at a post over at Noupe that featured some great fonts from deviantART. Lovely, those fonts. I want to use them, but I simply can’t, because it doesn’t show on every computer. Why? Because not every visitor has that font installed on their computer.

What can we do about it? Nothing. It’s the same problem we have with Internet Explorer 6, it just doesn’t leave the scene, because there are still too many people who use it. We just can’t say, “All computer users, install this disk with free fonts”. Even if we did that, not everyone will install the fonts, and the problem isn’t solved.

So, we have a problem. Where the solution? We always have those people that started to look for some inventive solutions. They found them, take a look below for at a couple of ‘em.

Web Safe Fonts

To give your paragraphs, headings and titles a somewhat special look even with normal fonts, we have to improvise with the possibilities that are available (take a look around, we all have to deal with the problem): fonts that are installed by default on most (if not all) operating systems and therefore we have the best chance these fonts work.

Dustin Brewer has done some great researching work when he wrote this post. Fortunately for us, we now have a complete list (or almost!) of the fonts we could use on the internet, without fearing some people don’t see our content.

sIFR

In the past, I have wrote a tutorial about this technique (it’s aged now). sIFR is a combination of Flash, HTML, CSS and Javascript and I know, that sounds hard. But really, it is not that bad.

Recently, sIFR has released a great new version, called sIFR 3.0 and it has gone a long way since its first release. It has features like text-resizing, turning sIFR on/off and printing solutions. Take a look on the site for more features.

This is an awesome solution to our little problem, at least for headings or titles.

Image Replacement

Another way to include some sexy fonts in your website is by using images. You know, those images you designed in Photoshop with a special font and replaced with the original, standard looking heading. But, what if you run a blog, should you be designing a image for every post you write?

Of course not, we have inventive people with us on the web. There are plenty of software packages around that show you how to use image replacement on a user friendly and accessible way.

FLIR is the one I recently read about, and I think we will hear loads of this technique in the future. Oh yeah, here is a tutorial to learn how to install and use FLIR on your website.

Any More?

I am sure there are more tips and tricks available but usually those aren’t the best. Maybe they have problems with accessibility or it’s not compatible on every computer. If I have forgotten your personal favorite or an absolute awesome kit, comment and I will add it to the list.

Cheers.

Information about the Author:

Name: Stefan Vervoort

URL: http://twitter.com/divitodesign

Description love football, enjoy design, like typography, shoot photos, write blogs, catch carpers, keep chilling.

Interesting Posts

Typography

14 Comments

  1. liam says:

    Good read, really like this topic! I think sIFR is a lot better than fLIR, because I like to have the text selectable. But with fLIR (at least on firefox) you cant select the text. That’s probably the only reason I wouldn’t use it.

    I think there needs to be more cross browser friendly fonts available, I’m getting bored re-using the same fonts over and over again for web safe text.

    I don’t see why Apple/Microsoft/Firefox can’t get together to fun some font designers to create some top-notch fonts that would be web safe.

  2. Awesome you came for a visit Liam, I am following the wefunction.com site via RSS :) .

    Yes, I agree with the points you made. I have used sIFR myself and that is better then the fLIR. Well, we just have to wait until something happens.

  3. Wow, i never thought there will be anyway out of this font stuff. anyway, i will check out the solutions youmentioned

  4. It is better to do that. You can do so much more with them :)

  5. AzAkers says:

    Wow – this is an excellent resource. I’ve run into several of these options when looking for creative solutions for my clients.

    As you may already know, from an SEO perspective it is much more beneficial for your pages main keyphrases to appear in an H1 on the page rather than to be in an image.

    However clients often have established branding guidelines that dictate how the sites headers should look, and often this look can’t be replicated using web safe fonts and pure CSS & HTML coding, so these options offer a solution.

    I hadn’t heard of FLIR before – it looks rather promising!

    Thanks again

  6. [...] Use Photoshop Brushes (Difficulty: Moderately Easy) First saved by randomdestiny | 1 days ago Fonts on the internet: What are our options? First saved by too | 3 days [...]

  7. [...] that doesn’t have to be installed on the computer of the user. sIFR creates more typography options for the [...]

  8. futon phil says:

    About 10 years ago I was playing around with some interesting styles of fonts only to discover obviously that the fonts also had to reside on the users machine and you couldn’t “push” them to the user. A bummer but understandable. I usually format in Arial, Helvetica for the most part since everyone has these but of course I always wonder if there are better ways to “push” fonts through. Too bad really.

  9. nadz says:

    ya nice tricks buddy. love to use this differnet styles in my site. I just love keep experimenting with theses.

    Flir seems interesting gonna try it for sure

  10. Internet Availability says:

    I never thought there will be anyway out of this font stuff. anyway, i will check out the solutions you mentioned
    It is better to do that. You can do so much more with them..

  11. Web Design says:

    I was sick of using tahoma every time for web pages. Pixels seems to be broken for every other font at high resolutions. Using images is a good option, but not good for SEO. So, this article open up new horizons for me to research. I have already started with sIFR. Thanks

Please Respond and Give your Opinion

We use Gravatar to handle our avatars. Get one there!