MakeUseOf » fonts

Combat Chronic Comic Sans Font Misusage With These 3 Sites

Joshua Lockhart — Wed, 31 Aug 2011 00:31:27 +0000

It seems like wherever you are, there is always going to be some form of the printed word within your field of view. With so many words floating around, designers take great care to make their words stand out from the crowd through stylistic fonts. But then we have the Comic Sansusers. For some reason, people still insist on placing this overused font on the most peculiar text displays in the most inappropriate places. However, there are a number of people out there willing to fight the good fight and put an end to Comic Sans misusage. You can be one of them by taking a look at these three sites!

Ban Comic Sans

Right here, we have the site that started it all – Ban Comic Sans. Started by Dave and Holly Combs (both prolific designers), the pair set out in 2002 in an effort to “put the sans back in Comic Sans.” At first glance, the site has a semi-dedicated blog devoted entirely to the removal of Comic Sans from all text displays everywhere, and to prove a point, the Combs couple has even installed a section of their site providing several instances of Comic Sans misusage. In addition to this Flickr photo presentation of the font in everyday life, the site provides the following short 8-minute documentary (featuring Comic Sansified versions of common logos and brands) about the font as well as a firm typography manifesto. Besides the content that the site provides, the Combs also sell various shirts, stickers, and even coffee mugs (by Zazzle, CafePress, and Spreadshirt) featuring artwork highlighting the campaign against Comic Sans. However, if you don’t feel like dropping too much money, they also have free propaganda flyers to print out as well as DIY stickers that you can simply make at home using the proper paper (Avery 8164 to be exact). Also, if you still feel the need to use comic-fueled fonts, you should check out their wide assortment of Comic Sans alternatives.

Comic Sans Criminal

This is more of a one-shot kind of site in that it really serves no other purpose other than what it already is, but even so, Comic Sans Criminal has the potential to be the gift that keeps on giving. Basically, the site is devoted to evangelizing the truth about Comic Sans misusage to those that take part in it. Upon arrival to the site, users are welcomed by a page that simply states, “You’re a Comic Sans Criminal, but we’re here to help you.” So if you see someone using the dreaded font, you should quickly send them the link, notifying them of their criminal state. After clicking through to the next screen of the site, they will be treated to an in-browser slideshow highlighting the negative effects of Comic Sans. However, the site does make note that there are a few reasons that using Comic Sans could be quite reasonable. Besides usage for an audience that is under 11-years-old and for comics themselves, the site makes aware that many dyslexics would find the font easier to read than anything else. As a matter of fact, for more dyslexic information, the website provides a link to Dyslexic.org. Everything about Comic Sans Criminal is highly tongue-in-cheek, but it does provide a few legitimate points. For instance, items such as defibrillators should never be labeled in Comic Sans, so I guess you could say that proper use of the font (or lack thereof) could save a life.

Blambot

Blambot is certainly not an anti-Comic Sans site, but it provides several free alternatives to comic-styled fonts. The site has a little something for everyone, keeping in mind the fact that comics often need different lettering for different purposes (no, Comic Sans can’t be used for everything). The site has three classifications – limited edition paid fonts, paid fonts, and thankfully, an excellent selection of free fonts. I know it may be surprising, but there are a lot of other comic-related fonts to choose from besides Comic Sans. As a matter of fact, Blambot has a different font for every purpose whether it be for dialogue, sound effects, basic design, or even crazy symbols. Blambot was founded by Nate Piekos, an artist who is proficient in comic font design and lettering. In addition to Blambot’s basic available fonts, Piekos also provides services for custom comic font creation and design.

Conclusion

Comic Sans isn’t all that bad, but it certainly can misused or overused. Fortunately, the three sites above provide insight on correct usage of the font as well as plenty of healthy alternatives. Granted, if you are feeling angsty and full of hardcore font-rebellion, you could take a look at Kill Comic Sans, a frustrating arcade-shooter with an emphasis on the incapacitation of the light-hearted (but evil) font. What instances have you ever seen Comic Sans misused? What are some of your favorite fonts?

Manage & Compare Fonts Easily With Font Manager [Linux]

Justin Pot — Sat, 13 Aug 2011 19:30:06 +0000

Browse and manage your Linux fonts using a simple GUI. Font Manager is a program that allows you to browse, compare, manage and even add fonts on your Linux system; a must-have tool for designers on any platform.

Windows users can manage fonts from the control panel; OS X users have the robust Font Book. Many Linux distros, including Ubuntu, don’t come with a similar tool for the job.

Enter Font Manager. Available in the repositories of most Linux distros, Font Manager can give you a quick look at your installed fonts and allows you install new ones quickly.

Let’s take a look.

Browsing Your Fonts

Fire up Font Manager and you’ll soon see the main window. The list of fonts and the preview panel are self-explanatory:

This is a great way to review the fonts on your system. If you’re working on a project, you can use this tool to quickly find the ideal font for said project. You can even adjust the size of the preview panel, allowing you to see how well the font can scale.

Clicking the browse button changes things a bit:

The list of fonts are there, but now every font name is displayed in said font. You can even see all the versions of a particular font. Very nice.

You might, however, want to see how a certain combination of fonts looks next to each other. This can be done under “Compare”, and can be quite useful:

As you can tell, this tool is well thought out for designers on the hunt for the perfect font. This is handy for me when I’m designing covers for our MakeUseOf Guides.

Installing New Fonts In Linux

Want to install a new font? Sadly the button to do this isn’t as obvious as I’d like, but it does exist. Behold:

That’s right; click the gear to install fonts. This will bring up the standard file browser, which you can use to find multiple fonts for installation.

Alternatively, you can set Font Manager to scan particular directories at start-up:

Find this under the settings. Any fonts in the folders you add using this tool will automatically be installed to your system. I like this myself, but some people with font collections in the thousand may not like the surprise.

Adam Saveran had this to say in the Ubuntu Software Center comments:

“…when you add directories to [Font Manager] you’re actually installing all of the fonts in the chosen directory. Could cause serious, though temporary, problems with your system as hundreds or thousands of fonts attempt to load. (Happened to me.)”

Adam, as well as every other commenter, had nothing bad to say about the program (the words “excellent” and “should be installed by default” came up more than once), but this is something to be aware of.

Get Font Manager

Ready to install Font Manager? Depending on which version of Linux you’re using you should be able to find the program in your package manager, under the name “font-manager”. If not you can download the font manager source code here, if you’re an advanced user.

Ubuntu users can simply click here to install Font Manager using Software Center.

Conclusion

I’m happy to finally have found a decent font manager for my Linux computers. In many ways I actually prefer this program to Font Book on my Mac, which until now I thought was the best font manager out there.

Of course, I’m sure you readers can name some better software for me. List it in the comments below, along with some links to your favorite free fonts!

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

Joshua Lockhart — Wed, 27 Jul 2011 00:31:29 +0000

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

5 Tools To Compare Typefaces & Choose The Right Font For Your Work

Saikat Basu — Fri, 08 Jul 2011 18:31:47 +0000

Over the course of the years, we have talked a lot about fonts. We have seen how to create fonts; how to download some free fonts; and we have also checked out what the world thinks about fonts with the help of a poll. But we have never quite sat down and talked about the first thing we do with fonts – compare them and see which one is just right for our use.

I am using the term ‘font’ here because it is the more used term, though the accurate one is – typeface, when we talk about its appearance. As Type Designer Norbert Florendo put it – font is what you use, and typeface is what you see. Semantics aside, when we attempt to select a font, we do quite a lot of comparing between the different fonts available to us. Here are seven tools which might help you to pick the right font for your work.

Typetester

The online font application is primarily designed for web designers who spend an awful lot of time getting the right screen font. The tool not only lets you select fonts from different lists (web safe list; Windows list; Mac list; Google list) but also gives you a few dropdowns to play with and modify the font properties. You can enter your own sample text and also play around with the color.

You can also pick a variety of other fonts that may not be there on these lists. You can experiment on the sample text by comparing three different fonts at one time or picking one font and customizing the properties in the three columns. The slick application gives you a useful view side-by-side. (See Directory mention)

FontComparer

This is another dynamic comparison tool which lets you compare different web fonts at a glance. The choice of fonts comes from Google’s font directory and TypeKit. You can type in your own text and see how the fonts change the look of the title and a line of text. When you find a font you like, mouse-over the sample text to make the “Get Font” link appear. Click on this link and the CSS for that font will be displayed in a frame at the foot of the webpage. You can copy-paste the code into your own web page HTML code. (See Directory mention)

Font Tester

Font Tester is not as visually pleasing as the first web app on our list, but there’s no denying its usefulness as it comes with a few more options that allow you to preview and pick the right font. You can use the font comparison and check out three styles side-by-side. You can use the default text or again enter your own. Next, play around with the CSS properties (all font related ones are included) to get just the right look you want for your web design. A color picker allows you to further fine-tune the appearance. There’s also a character map which you can use to quickly find the matching HTML Entity for a particular character.

Designer Plaything

Experiment with different typefaces and color combination on this online tool. Tweak the text that relates to body copy and headlines, and play with the background and body text colors. The plus is that you will be given an instant feedback as to whether your chosen combination meets with World wide Web Consortium (W3C) recommendations.

You can set the width of the sample article along with the length of the article and the paragraphs. Designing for different environments is also helped by the instant color contrast and brightness accessibility recommendations from both W3C and Hewlett Packard.

Font Dragr

This font comparison tool is an experimental but interesting application of HTML5. Therefore it will only work in browsers that support the new standard. Right now it’s Firefox 3.6 and above. You can simply drag and drop any truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts from the desktop to the left hand side bar and it changes the font-family of the text. The default text can be edited to include your own. You can select the fonts on the left panel and observe the changes.

So far we have looked at five online web apps that let us preview and select the right font. If you are looking for a desktop freeware instead, take a chance with FontViewOK (ver.2.15). It’s a Windows only app and as our brief review will tell you, it’s simpler than the web apps we have covered above.

Are you a web designer who needs a font comparison tool in his web design toolkit? Which are the other font related apps you would like to recommend?

Image Credit: Shutterstock

What’s Your Favorite Font For Standard Web Text? [MakeUseOf Poll]

Angela Alcorn — Sun, 12 Jun 2011 22:30:51 +0000

Last week we asked you all to tell us how much hard drive space you have. While a few people shocked us with figures of around 40 TB for their household, most people seem to have less than 1 TB.

We collected 761 votes split up as follows: 30% voters have between 1-3 TB hard drive space in their house; 16% have 3-5 TB; 15% have between 500 GB and 1 TB; 15% have more than 5 TB; 14% have 250-500 GB; 6% have 100-250 GB; and 5% have less than 100 GB.

Full results and this week’s poll after the jump.

If you consider all the voters with less than 1 TB storage it comes to around 40% of people.

This week’s poll question is: What’s Your Favourite Font For Standard Web Text?

This is mainly for the web designers out there, because we know you’ll have a favourite font up your sleeve. But I’m sure there are other designers and aficionados of good fonts who have clear preferences as to what they like to see on websites. So, what are they?

The poll has been made so that you can list any and all fonts you love. This means you can also give your preference for Serif versus Sans Serif while you tell us your favourite fonts.

What’s Your Favourite Font For Standard Web Text?survey software

If you are a web designer, feel free to let us know in the comments what your ideal standard font designation is. What’s first on the list? And then what?

10 Cool & Interesting Web Applications On Fonts & Typography

Saikat Basu — Fri, 01 Apr 2011 18:31:34 +0000

I have always been intrigued by how thick and thin lines, angles and shapes can come together and form beautiful fonts. Just a shift of pressure on a stroke and you can get something entirely new. That’s the magic of typography.

Typography is art in its truest sense, and the web has certainly made it more mainstream. Choosing the right fonts and a theme to go with it are joined at the hip when it comes to web design. The right combination gives us a web design that spells ‘wow’.

Not all of us are graphic designers or art directors; but that shouldn’t stop us from exploring the wonderful world of typography. Typefaces and fonts are just a part of it. There are varied web applications and websites that can help perk up your interest.

Explore these ten websites…some of them are practical tools and some are just cool. In the end, I am sure you will see that fonts aren’t just print on a page.

Flipping Typical

When you first land here you won’t immediately grasp what it is about. The single page display of fonts shows you the popular typefaces you have on your computer. The whole thing is a bit of Javascript ‘magic’. You can also type in any text and see it displayed in different typefaces. Also, you can change the font name in the top black bar to change the display with the new default font. (See Directory mention)

You can also try the similar STC fontBrowser 2.0 online tool to view the active fonts on your system.

TypeNavigator

You have seen a font somewhere but can’t exactly place the name of the typeface. TypeNavigator helps you sort through the probabilities with its unique visual search system. Select the closest look from the choices on display; then work through the forms like width, angle, contour etc to narrow down your search. Think of this useful font app as a filter to jog your memory cells and get that fuzzy font you remember from somewhere.

Identifont

This web app gives you two routes to get to an obscure font. Answer a series of questions or search for a font by giving part (or whole) of its name. The site says that it is the largest independent directory of typefaces on the Internet, with information about fonts from 645 publishers and 175 vendors. Click on any of the tabs to search fonts by appearance, name, similarity, or by a descriptive word. (See Directory mention)

Typechart

This useful font website is for the web designer who wants to compare web typography and settle on one. Typechart’s usefulness comes in because the web designer can also download the CSS for the particular font. Using the preview, font rendering for Windows and Mac can be compared against each other.

We Love Typography

Membership to this cool type related blog is by invitation only, but that’s because the site wants to focus completely on beautiful typography from around the web. If you love typography, then the visual website is a must visit.

Typedia

Typedia is a community encyclopedia of typefaces. Using the search engine on the site you can search for typefaces, designers, foundries, and other related links. Another way to look into the world of typography would be through the listings on the site (check Browse Listings). The site explains its principle as – think of it like a mix between IMDb and Wikipedia, but just for type.

Typetester

Typetester as the name indicates is a very useful tool for web designers who want to compare the appearance of different fonts on the screen. You can pick the ones given in the list or also use the ones detected on your system. You can also compare each font against each other by changing the parameters like color, size, case etc.

FontStruct

We have looked and admired fonts. Now, if you think that it’s time to design a few fonts, you can try out this free online font-building tool. If you have ever tried your hand at designing icons on a grid editor then this tool will be familiar to you. Using simple strokes you can design fonts. It’s not difficult, but you have to be patient and creative. Fonts can be saved, shared, and downloaded for your use. Check out the gallery to see the scope of this online app. (See Directory mention)

The Rather Difficult Font Game

This simple guess the font game can leave even the most well versed designer stumped. But you can discover cool new fonts while you rack up the score. There’s even an iPhone app.

Dance Writer

Typotheque Dance Writer is a fun application that takes your letter inputs and converts them into dance movements. You can for example type in your name and make the interactive human figure move to it. There’s no useful application for this…except a bit of fun. One of its fun uses is to type in a text message and email it as dance movements to your friends.

We have seen that fonts and typography websites come in many flavors – from the practical to the fun. For more regular uses of fonts, check out some of our previous posts on fonts –

5 Excellent Sources To Download Free Text Fonts
10 Cool Free Computer Fonts That Will Make You Stand Out
How To Create Your Own Fonts & Characters on Windows

If you love typography, let us know about your favorite website.

Image Credit: Shutterstock

How To Use Thousands Of Non Web-Safe Fonts To Spice Up Your Website

Jeffry Thurana — Wed, 03 Nov 2010 18:31:01 +0000

It’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 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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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

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.

Use Really Cool Fonts in Your WordPress Blog With Google Font Directory

Jeffry Thurana — Wed, 15 Sep 2010 18:31:32 +0000

If you’ve ever peeked into your font directory, you might have noticed that there’s a small group of fonts called “Web-safe”. As the name suggests, these are the saved fonts that can be safely used as web elements. But looking at this group, we can’t help but wonder about the other side of the coin – the “Web-unsafe” groups which all the other fonts belong to.

We can also conclude from the font-usage perspective, the world of web design is really a small isolated box. This is because most of the thousands of fonts that exist today are useless when it comes to web design.

(Not So) Long Ago In A Virtual World (Not So) Far Away

In the beginning of web-time, internet users had to accept whatever font was dictated by the browser. Then Netscape introduced the

tag in 1995, which basically allows web owners and web designers to play a little bit with typography.


Unfortunately, this breakthrough seems to have been a pseudo freedom as the fonts used in a web design should already be installed on the user's computer.  But how would you know what fonts your visitors have?  To be safe, web designers just use the most common ones. Thus the term "Web-safe fonts" was coined - the fonts that every web user has in their computer.

The possible solution to this problem is to install the fonts that we want to use somewhere in the cloud and point the design there. While this might be the best alternative today, the method still poses some problems. Mainly about the access speed and endurance of the server, and also about the copyright issues.
There are already solutions to these problems, for professionals who don't mind paying for good service, coming from companies like Typekit, Kernest and Typotheque. For everybody else, we have Google. The web giant is kind enough to provide us with Google Font Directory.
A Blog With An Attitude
If you have a blog and you don't want it to be just another face in the crowd, you can easily give it a font-lift with the help of Google Font Directory. And if you use the self-hosted WordPress for your blog, everything is so much easier because of a WordPress plugin called "WP Google Fonts".
Go to the WordPress plugin menu and click "Add New". Do a search for the Google Font plugin and WP Google Fonts will be at the top of the list. Click "Install Now" and click "OK" on the pop-up confirmation window.

The plugin will be installed in seconds. Click "Activate Plugin" to start using it.

WP Google Fonts "Control Panel" is located under "Settings - Google Fonts" on the WordPress sidebar menu.
Using and managing Google Fonts Directory with this plugin is very easy. The basic usage doesn't require you to mess around with codes, HTML or CSS. All you need to do is select the font that you want to use and determine which web elements you want to assign the font to.

If you know your way around CSS, you can further customize the look and feel of your font by writing the codes in the "Custom CSS" box.

And don't forget to click "Save" after making changes.
There are a total of 6 "Font Options". This means that you can use up to 6 fonts from Google Font Directory and assign them to different combinations of web elements. There's a list of all available fonts that you can find at the bottom of the page.

To test drive the whole process of applying customized fonts to a WordPress blog, I did some experiments using my personal blog.
So let's compare the results. Here's my blog before applying customized fonts using the WP Google Fonts plugin.

And here's what it looks like after changing the Header h1 font to "Reenie Beanie" and the body font to "Molengo". Can you spot the difference?

I have only practically scratched the surface here. You can do so much more customization with CSS codes. If you are really into typography, you might consider investing more time in learning CSS.
What do you think about font customization? Do you know any other easy ways to achieve this?  If so, why not share your knowledge using the comments section below?
Image credit: Typekit



Manage Your Fonts With The Fonts Panel & Font Book [Mac]
Jeffry Thurana — Tue, 07 Sep 2010 17:31:52 +0000
If there’s an award for the most important yet neglected element of every operating system, I think fonts would at least make it to the top three of the nominations. We run into and use them all the time, but most of us never really pay attention to them. We just accept the fonts as they are, as we do with air.
But if we are willing to spare a little bit more time digging, we can find many amazing things that we might not have known before. If you are a Mac user, you might have noticed that Apple pays special attention to the use of fonts.
And you don’t have to be a typographer to make use of fonts. Here are several things you can do to manage fonts on your Mac to tap their potential.

Summoning The Fonts
The most obvious way to use the fonts is to use them in text. The quickest way to summon the list of fonts is to use “Command + T” or “Format – Font – Show Fonts” menu from any Cocoa-based text editor in your Mac – such as TextEdit and Bean.

The Font panel will open and you can use it to customize the font(s) that you are using in the text, starting from the simple settings like changing the font type and size to the more advanced options like changing the color and applying drop shadow.

If you click the settings button at the bottom of the window, you’ll get more options such as adding the used font setting to favorites, hide/show Preview and Effects toolbars, and Color Panel.
Choosing “Typography” will open the Typography panel where you can further customize the font that you are using. But please note that different fonts have different customization levels. One font might give you more options than aother.

The settings button will also give you access to lots of characters and symbols that you can use in your texts. Just choose “Characters”

And, clicking on “Manage Fonts” will open up the “Font Book” window.
Managing The Fonts
Aside from the Fonts Panel, you can also open the Font Book by navigating to “Applications – Font Book.app” (or by using one of these application launchers). This free font manager allows you to easily add, remove, disable and other kinds of font management.

While it’s very obvious that you can add (or install) new fonts by clicking on the “Plus (+)” button under the “Font” column, Font Book also allows you to group fonts based on your own categories. To do that click the “Plus (+)” button under the “Collection” column.
The yellow alert triangles next to the fonts mean you have duplicates in your collection. You can resolve the problem by right clicking on the duplicates and choose “Resolve Duplicates“.

Right clicking on the font (or group of fonts) will also allow you to disable the fonts that you rarely use. This will free up some system resources – very useful if you have a slow system or if you have too many fonts installed on your system by third-party applications.

The advantage of disabling the font instead of removing it is that you can easily enable the font anytime you need it again.
Printing Type Samples
Another trick that you can perform using Font Book is the ability to print out type samples. Whenever you need hard copy of font samples for reference – what will they look like off the screen – just select the fonts that you want to print and hit “Command + P” (or go to “File – Print” menu).

The only setting that you have to tinker with is the “Report Type” on the printing option page. This setting will determine the face of the print outs.

And here’s the example of a print out page, Repertoire Type.

Do you have your own tricks in managing fonts? You can share them using the comments below. And don’t forget to check out our other articles about fonts.



10 Simple But Useful Ways To Use The Character Map & Your Lesser-Used Fonts
Saikat Basu — Fri, 13 Aug 2010 18:31:32 +0000
Take a look at the Character Map in Windows and tell me your best “˜font friends’ on it. Usually, it doesn’t go beyond the Arial font family, the Times New Roman font family, and a few neighbors like Comic Sans coming into your circle. But even then, are you pally with all the members of each font family? Well, that’s quite impossible.
But maybe once in a while we should take a stroll through the “˜characters’ in each of the font families and see what unique uses we can put the lesser known fonts to.
The Character Map installed on each system is a motley of nice upright fonts, crazy scrawny ones, and of course the symbols and the dingbats. Just take the dingbat fonts (Webdings and Wingdings); they are a rich collection of symbols and small pictograms we can use. From religious symbols to the computer parts (even a ticking bomb), you will find something of use there.


Just to give you an example of using the lesser fonts creatively ““ you can take the “˜scissor’ character from Wingdings and put it next to a dotted line. It illustratively tells you on a printed sheet – cut along the dotted line.
So open up the entire character set and let’s put down some more rapid fire uses of the lesser used fonts instead of making them feel like orphans.
On Windows XP - Click Start, point to All Programs, point to Accessories, point to System Tools, and then click Character Map.
On Windows Vista / 7 – Click Accessories, then System Tools folder to access the Character Map in Windows.
Or alternatively, click Start, then the Run dialog”¦type in charmap.exe; hit OK.
Deck Up Your Text With Fancy Bullets

If any, lesser used fonts can find their most creative use as fancy bullets. For instance, instead of repeatedly using the default ones, the dingbat fonts can be brought up. One of the tricks in 4 Custom Bullet Tips and Tricks for Microsoft Word 2007 referred to their easy handiness as decorative bullets.
Express Yourself With Dingbat Smileys In Yahoo Messenger

The entire Character Map can be your smiley sheet. Open up the Character Map, select the dingbat font of your choice, click on Copy. Type in your text with a regular font and then choose the dingbat font from the dropdown before pasting the character from the clipboard.
As with any text you can adjust the font size and color of the dingbat font. Oh, dingbat fonts do have regular smileys of their own.
Make Them Stand-In As Clipart

Fonts which resemble graphics can be good substitutes for cliparts. Take a look at the screenshot above – the uncomplicated lines of the “˜His’ and “˜Hers’ is as good as any clipart.
That’s from Webdings. Any number of these symbolic fonts can be used to deck up your presentations or publications.
Visual Cues In Your Notes

Nearly every font has characters which resemble symbols. Take Arial for instance. While writing notes in a text editor, these “˜symbol’ characters can be used as visual cues for interpretation. Combining them with characters from Symbol, Webdings, or Wingdings further enhances your text.
Place A Non-Graphic Checkmark Or A Quick Checkbox

A simple checkmark has its uses in everything from lists to PowerPoint presentations. Head to Wingdings and its last row for the check and the cross non-graphic symbols. Typing one or a few letter C’s in Webdings creates a series of checkboxes which can be symbols for entering numbers like ZIP codes or phone numbers.
Make Your Folder Names Stand Out

Letters, numbers and a few special characters on your keyboard are run of the mill for folder names. But how do you get more creative with it? You use the Character Map to insert meaningful characters to the folder (or file) names. Using the characters in the right sequence also helps to arrange specific folders in an order.
If your default UI system font is Tahoma, then open up its character set and choose a unique character to set off your folder name differently. Of course, if you change the system font to something like Arial then you have a better set of characters to choose from like the character which symbolizes a musical tune or the light and dark shades characters.
For The Microsoft Logo

Just next to it is the last character in Wingdings. The Microsoft logo finds a lot of uses; from illustrating a Windows shortcut to just suggesting that this is a Windows tip.
Design Your Own Logo

You got the Windows logo easily. You can also play with the variety of characters in the Character Map to design your own simple logo. Open up your graphic editor; start off by typing the chosen character as text or copy pasting it from the Character Map.
The text can be rasterized, turned into a path, or a shape. You can go to work on it with all the graphical tools in your program. Two or more such characters can be combined to create creative but simple logos.
Copyright & Trademark Symbols With A Keystroke

Creative commons (even then see the next point) is fine but with the kind of plagiarism going on, you do have to spread your copyright and trademark around. Check out the details on inserting a copyright, registered or trademark symbol in Microsoft Word, Windows applications, or a webpage.
Another instance could be to download the Creative Commons logo and icon in an embeddable TTF and use them from the character map.
Map An Unused Key To A Special Font

This has become especially relevant for me as an Indian. The new Indian currency symbol is not a part of keyboards but it can be downloaded as a font file and mapped to an unused key for use in personal documents on the computer.
There are a thousand and one creative uses of fonts. But away from typography and graphic designing, what simple but creative uses can you come up with by just looking at the Character Map? Maybe it is for special accent symbols or simply putting the degree sign. Do type it in the comments.
Image Credit: FontFont