Microsoft introduces ClearType Japanese font with Vista

October 7, 2008 10:00 PM by Rick Noelle

Recently while browsing through a Japanese university's web site, I noticed that the Japanese fonts looked nice.  Actually, they looked really nice!  They didn't have the pixelated look I have come to expect from fonts such as "MS P Gothic" and "MS 明朝", etc.  Up until now, if you use Microsoft Windows to display Japanese, you were pretty much stuck with the pixelated ones.  This is unfortunate as I believe fonts have a big impact on overall user experience.

With Windows Vista, Microsoft has introduced a new default Japanese font that supports ClearType.  It is called "Meiryo" or「メイリオ」if you are using a Japanese locale.  For Windows XP users, Meiryo is availabe as a download.  I was using Vista while browsing the university web site so I had the Meiryo font on my system but I wasn't aware of it.  Using the Firefox plugin "Firebug" I examined the CSS stylesheet and saw the font style reference to Meiryo.  I checked my fonts folder (C:\windows\fonts by default) and sure enough, there it was!  Woohoo, why didn't I notice this before?  I launched Microsoft Word and entered in some Japanese and changed the font to Meiryo and sure enough, it looked just like the university web site's font.  Since a picture is worth a thousand words, I am going to show you two screen shots taken from the home page of Yahoo Japan.  One is using Meiryo and the other is not.  The content is exactly the same.

With Meiryo:

Without Meiryo:

As you can probably see, the Meiryo font makes the text look much, much better.  This difference really shines when you are using applications that have a lot of small detailed text such as Yahoo calendar, etc.   Hopefully companies such as Yahoo will update their stylesheets to include Meiryo soon.  Until that time, you can tweak your Firefox settings and also use the add-on "Stylish" to override the font.  Here is how:

1. Use the latest version of Firefox browser if you are not already.

2. If you are using Windows XP, use the link above to download the Meiryo font from Microsoft.  If you are using Vista, you are all set.

3. Install the "Stylish" Add-on to Firefox. (Follow this link and then click "Add to Firefox" for the Stylish Add-on by author np)

4. To take care of many web sites, you can set Meiryo as the default Firefox font. (Tools -> Options -> Content.  Under "Fonts & Colors" select Meiryo as the default font.  I have the size set to 16.  Next click "Advanced" and use the dropdown to make it say "Fonts for Japanese".  For proportional, I have "Sans Serif" selected with size 16.  For both Serif and Sans-serif I have Meiryo selected.  For Monospace, I have MS Gothic with Size 16 selected.)  Make sure you check the checkbox "Allow pages to choose their own fonts, instead of my selections above" or you will mess up a lot of web sites.  This only fixes sites that don't have a font specified in a stylesheet.

5. Since sites like Yahoo Japan specify fonts in their stylesheet (that don't currently include Meiryo), you can override them with Stylish.  Surf to Yahoo Japan and then in your Firefox toolbar, click Tools -> Add-ons. Click "Extensions". Find "Stylish" and click "Options". Now, setting up Stylish can be pretty tricky. Check the home page for specifics but here is a sample rule to get you up and running with Meiryo for Yahoo Japan. Click "Write". Click Insert -> Site Rules. Choose "In Domain" and type in yahoo.co.jp in the text box (leave off www). Click Add. Then click "OK". It should look like this:

The site rule you created will add this to the text box area:

@-moz-document domain(yahoo.co.jp) {

}

Between those lines, add this:

body,textarea,td,input {
font-family: "Meiryo" !important;
}
#wrapper {
font-family: "Meiryo" !important;
}

After these steps, it should look something like this:

6. Click "Save" and you should be all set.  Yahoo Japan should now be displaying with the Meiryo font.

Occasionally you will find sections of text that are wrapped with a special tag that revert back to another font.  If you use the Firefox plugin "Firebug", you can right-click on the text in question and choose "Inspect Element".  With that, you can usually find the style tag surrounding the text and add it to your Stylish rule.  Also, you can use the Yahoo Japan rule as a template to create similar rules for other web sites.

Hopefully this article has given you some ideas about how you can use the Meiryo font in Microsoft Windows.  Please leave comments if you have given it a try to let me know how it goes.  I'm hoping to add more screen shots of "with" and "without" web pages.  One I'm really amazed with is ThinkIT (www.thinkit.co.jp).  It looks so much better with Meiryo!