iRadar: 3 Ways To Temporarily Change A Website’s Font If The Original Font Is Not Good Enough

Friday, July 29, 2011

3 Ways To Temporarily Change A Website’s Font If The Original Font Is Not Good Enough

3 Ways To Temporarily Change A Website’s Font If The Original Font Is Not Good Enough: "

How many times has someone sent you a link to a website infested with incredibly hard-to-read fonts? It’s happened to all of us, and there’s not much we can do about it – or is there?

There are a few folks on the Internet who have experienced the same problem as you, and fortunately, they decided to do something about it. So graciously accept Grandma’s chain email link with no questions asked, and try out these web tools that all have one sole purpose – to allow you to see text on the web how you want to see it.

FontFonter [Web App]

It should be made clear that FontFonter isn’t going to transform the world’s worst website into something pristine and beautiful. Let’s face it. Bad web design is bad web design, and there’s nothing you can do to change it. However, it will make websites easier to read. Just punch your desired URL into FontFonter’s address bar, click the “FontFont It!” button, and embrace the glorious TypeKit font-changing magic.

With FontFonter, we can change any website’s fonts using three classifications: serif, sans-serif, and all. Basically, that means you could fix the website up with a whole new font scheme, or you could make everything uniform by deciding all the fonts should be the same. The tool is fairly easy to use in that you can replace all of a website’s sans serif fonts with your choice, and vice versa for serif. As mentioned, you can replace both of the website’s sans-serif and serif fonts with the same typeface.

The downside to FontFonter is the fact that it doesn’t provide previews of what fonts look like, so if you don’t have a mental list of TypeKit fonts, you are going to end up playing the lottery for a little while trying to find something suitable. Granted, this is a small price to pay, for as you use FontFonter over time, you will become familiar with your top choice selections.

Google Font Previewer [Chrome Extension]

The Google Font Previewer was created with web developers in mind, but it is also quite useful for the standard Internet consumer. The Chrome extension is designed for web designers who want to see how fonts from the Google Font API directory appear on webpages when in use, but it can also be a nice aid for those desiring a better font for easier readability.

After downloading the Font Previewer extension, you’ll be able to find it just to the right of Chrome’s address bar. Simply click it while on the website of your choice, and it will provide you with a multitude of options to mix things up. Select the fonts using the provided list, and customize with options such as increasing the text weight, changing the entire text to caps, or bumping up the percentage of text size in increments of 50.

In the case that you are actually designing a website, you could tackle the job using the Font Previewer’s CSS selection feature. Instead of testing your entire site while only looking at one selected font, you could actually enter specific tags that will change only parts of your work. This method is better than going back into the code every time you want to tweak something just to see how it would look.

Readable [Firefox Add-on]

Back in MakeUseOf’s past article, 4 Tools to Make Web Pages Easier to Read for People with Poor Eyesight, we were introduced to the Firefox Readable add-on (as well as its almost-identical relative, Reader). The add-on does not necessarily change the text styling of the actual website per se, but it does make the text found on it, well… readable.

If you want to read a particular article but struggle with the font that it is written in, simply click the Readable button for a nice change of scenery. Upon its activation, the add-on will open the content of the website in a theater-style presentation that features the page’s text and images in a very primitive, yet user-friendly, sans-serif form. Furthermore, highlighting a portion of the text only converts the selection, reducing clutter that you would normally have to scroll through.

Granted, even really nice things have their flaws, and in a cruel move, the activation button itself is the Achilles heel of Reader. The browser button is ironically incredibly tiny and almost blends in with the browser itself, presenting a very difficult-to-see design feature for those that the add-on is designed to help. However, this one problem does not sink the Readable boat, for as a whole, it is an excellent tool that can be used for the reading-impaired.

Conclusion

These three web-tools primarily focus on the text content of a website rather than the website as a whole, but as someone who once suffered serious migraines due to a great deal of in-browser reading, they are certainly a blessing. However, if you would like to find even more resources for easier in-browser reading, you should take a look at MakeUseOf’s 7 Firefox Add-ons That Improve Webpage Readability Level.

What are some of your least favorite fonts used in web design? How have these tools helped you? What other tools would you recommend?

Image Credit: jeltovski, The New York Times

3 Ways To Temporarily Change A Website’s Font If The Original Font Is Not Good Enough is a post from: MakeUseOf