One of the benefits of using a web font service is that all of the browser compatibility issues are taken care of for you.

To that end, I’m happy to report that we have been successfully serving the most up-to-date, standards-compliant fonts to Chrome 6 browsers for the past few weeks.

To get this support for the WebINK web fonts on your site you don’t need to do anything at all. We take care of everything for you.

If you’re curious about the details, we are now serving Web Open Font Format (WOFF) font files to all users who view WebINK fonts using Chrome 6.

More on the WOFF font file format can be found at Wikipedia, and the real nitty-gritty details at the W3C.


So, you’ve discovered WebINK and have been migrating your site to get rid of the ho-hum “safe” fonts in favor of some webalicious goodies. But when you test your site, do you get the sinking feeling that your bolds are more brash than they should be, or your italics just don’t have the right slant? You could be the victim of faux styling.

Faux styling is what a browser does when the style you asked for (usually bold, italic, or both) doesn’t exist. It widens and overlaps text to make it look bold, and it slants text to make it look italic. While this might approximate the look you want, it can be distracting.

Many font families available through WebINK have multiple weights and styles available. If your WebINK-enhanced site still comes up short when it comes to bold and italic, you can remedy the situation by using the styles that the type designer created for that purpose!

What you need to do to fix your face:

  1. Add new styles to your Type Drawer.
    If you use Suitcase Fusion 3 to manage your WebINK sites: Open the WebINK Library, find the font family you’re using, and drag the additional fonts to your Type Drawer.
    If you use WebINK.com: Open your Type Drawer, click Add Fonts, find the individual fonts you want, and click the Add button next to each. When you’ve added all the fonts you want, click the Save Fonts button.
  2. Generate the CSS code for the Type Drawer.
    Suitcase: Choose File > Export Type Drawer CSS and save the file.
    WebINK.com: Click Get CSS Code and copy the code in the dialog. (You may want to paste this into a text file to use it later.)
  3. Add the WebINK CSS to your website’s CSS.
    Copy and paste the @font-face definitions from the CSS from step 2 into your website’s CSS file.
  4. Update your style definitions to use the new font styles.
    This is where the fun begins.

Let’s say you’ve added bold and oblique versions of the URW font Eurostile T to your Type Drawer. You now need to change style, class, and ID definitions in your CSS to incorporate the new fonts.

If your old CSS looks like this:

@font-face { font-family: EurostileT-Reg; src: url("http://fnt.webink.com/?drawer=xxx&font=xxx"); font-weight:normal; font-style:normal; font-variant:normal; }

body { font-family: EurostileT-Reg, Arial, sans-serif; }

h1 { font-family: EurostileT-Reg, Arial, sans-serif; font-weight: bold; font-size: 150%; }

and you add these new fonts

@font-face { font-family: EurostileT-RegObl; src: url("http://fnt.webink.com/?drawer=xxx&font=xxx"); font-weight:normal; font-style:normal; font-variant:normal; }

@font-face { font-family: EurostileT-Bol; src: url("http://fnt.webink.com/?drawer=xxx&font=xxx"); font-weight:normal; font-style:normal; font-variant:normal; }

then you need to change h1 as follows:

h1 { font-family: EurostileT-Bol, "Arial Bold", Arial-BoldMT, sans-serif; font-weight: normal; font-size: 150%; }

Notice the changes? We are using the true bold version of the font, so we change the font-weight to normal. (If we don’t, some browsers will apply double-bold.)

We also use the true bold versions of our fallback font. In this case we call out specifically the font name “Arial Bold” and the PostScript name Arial-BoldMT to accommodate browsers and platforms that rely on the PostScript name instead of the font’s “menu” name. (Stay tuned for a future post on PostScript names.)

You probably use <b> and <i> tags, or maybe <strong> and <em> somewhere on your page. If not now, you likely will someday. Create new definitions for them in your CSS:

b, strong { font-family: EurostileT-Bol, "Arial Bold", Arial-BoldMT, sans-serif; font-weight: normal; }

i, em { font-family: EurostileT-RegObl, "Arial Italic", Arial-ItalicMT, sans-serif; font-style: normal; }

Up to this point I’ve ignored the bold-italic combination. There are two concerns with bold-italic: when the font in question has a bold-italic variant (or bold-oblique), and when it doesn’t.

When you want to use your font’s native bold-italic variant, you will need to add definitions to your website’s CSS. Add the WebINK CSS:

@font-face { font-family: EurostileT-BolObl; src: url("http://fnt.webink.com/?drawer=xxx&font=xxx"); font-weight:normal; font-style:normal; font-variant:normal; }

Then add this definition:

b i { font-family: EurostileT-BolObl, "Arial Bold Italic", Arial-BoldItalicMT, sans-serif; font-weight: normal; font-style: normal }

You can include other combinations of these tags that you use in your HTML, either as part of one big definition or as multiple definitions:

b i, i b, strong em, em strong, strong i, i strong, b em, em b { … }

If your chosen font does not include a bold-italic variation, and you feel you do need to use bold-italic text on your site, then you should be aware that most browsers will apply a faux style on top of a real style. You can control which faux style is applied by the order of tags in your HTML. Tags are applied from the inside out, so that if your HTML is

<strong><em>some text</em></strong>

the em tag is applied first, yielding a real italic with faux bold applied. This is generally more appealing than the reverse

<em><strong>more text</strong></em>

where the true bold text will be slanted.


It’s the season to be scary, so here are some thoughts for what you might do for a Halloween makeover of a web site using WebINK fonts! The most obvious horror choice in WebINK must be P22 Spooky, but there are many other options, such as Givry Web from TypeTogether.

P22 Spooky & Givry Web

For “normal” text that looks just a little old-fashioned, you might consider the classic stylings of King’s Caslon from Dalton Maag (inspired by William Caslon’s work in the early 1700s). The “Display” versions are intended for large sizes. For more antiquated, try Alte Schwabacher, LTC Goudy Thirty, P22 Morris Golden or Morris Troy, or maybe P22 Operina, inspired by early italics of the 1500s.

Operina and King's Caslon

If you’re going for modern horror, consider the Dalton Maag’s Royalty or P22’s Kirkwall Bold. Or, to get a funky occult feel, consider P22 Vale King’s Fount, P22 Arts & Crafts, Legothic, Arnold Boecklin, Liberty, Artcraft, Introspect or Abbey.

Royalty, Kirkwall, Vale King's Fount, Arts & Crafts


Are you interested to see how web fonts can make your website cooler? Do you like having drinks in a cool location? Do you like having the chance to win an iPad? If you answered “Yes” to any of these questions, be sure to visit with us at our upcoming cocktail party in association with the An Event Apart conference in San Diego.

You don’t need to be attending the conference (it’s already sold out!), just have a desire for fun and interest in learning more about web fonts.

Party details:


This week we are presenting two seminars in Australia that cover Font Management and Digital Asset Management Best Practices. In both events, we’ll be showing off Suitcase Fusion 3, Universal Type Server and Portfolio Server 9.5.  We’ll be show you how effective font management and digital asset management can help streamline any creative workflow.

The first seminar is at the Word Warehouse with Crunch IT in Melbourne, Australia.

Details:

  • Font Management and Digital Asset Management Best Practices
  • October 27, 2010, 10:00 a.m.
  • Word Warehouse, 14 Goldie Place, Melbourne VIC 3000
  • Register for the seminar here.

The second seminar is partnered with Vertu Technologies in Brisbane.

Details:

  • Font Management and Digital Asset Management Best Practices
  • October 28, 2010, 5:30 to 7:30 p.m.
  • Vertu Technology, Seminar Room Level 22, 127 Creek St Pipe Networks House Brisbane, QLD 4000.
  • Register for the seminar here.

We hope to see you there!


‘Tis the season for all things political, and in doing so, we’ve had a good time playing around with some of the most prominent political sites using the new Web Preview feature of Suitcase Fusion 3.

What better sites than to play with than the main sites of the Republican (www.gop.com) and Democratic (www.democrats.org) parties. Since both parties tended to set their text in images on the main pages (naughty, naughty – that’s so bad for their search engine optimization), I chose the “blog” sub-pages as more text-heavy examples.

We replaced the standard fonts in use on the sites (like Folgers!) with Comic Sans. So, now to the throwdown! Who wore it better? Click on the images for a full-size version.

The Democrats?

Or the Republicans?

Both sites have a large amount of interface elements still set as images, but the Comic Sans sure shines through!

Tell me your thoughts. Who wears it better?


Today we released an update for our client/server font management solution, Universal Type Server.

This is a free update for all users of Universal Type Server 2 and includes a number of security updates and performance improvements for both the server and the clients .

This update for Windows version of the Universal Type Client also includes font auto-activation plug-ins for Adobe InDesign CS5 and Illustrator CS5.

Download the Universal Type Server 2.1.3 updates here.


The debate about whether Comic Sans is a typeface worthy of certain types of use has been debated for years with sites such as Ban Comic Sans rallying the troops, and even McSweeny’s creating a quirky spoof.

The BBC has now weighed in, and I thought that it would be fun to use Suitcase Fusion 3′s Web Preview feature to see how the BBC’s Comic Sans article looked when set using Comic Sans. Click below for the full size image. All live text, including menus and sidebars are set using Comic Sans.

Using Suitcase Fusion 3, you can preview any site will look using any WebINK or desktop font, without mucking with any CSS or HTML code. Check out a free 30 day demo of Suitcase Fusion 3 today.


WebINK 100% Uptime!

We’re proud to report that the WebINK web font rental service has been consistently serving fonts, 100% of the time since just after we launched in August, 2010.

We monitor the uptime of WebINK using the Pingdom service, so you don’t have to take our word for it, go ahead and check for yourself.


If you’re using two of our popular font familes from WebINK on your website, you may have noticed some recent changes in how your fonts render with Microsoft Windows.

Recently we updated two of the fonts in our collection so that they display better when viewed using browsers on Windows operating systems. We updated the following font faces.

The Omnes font family from Darden Studio, including all of the family variations:

  • Omnes Black
  • Omnes Black Italic
  • Omnes Bold
  • Omnes Bold Italic
  • Omnes Extra Light
  • Omnes Extra Light Italic
  • Omnes Hairline
  • Omnes Hairline Italic
  • Omnes Light
  • Omnes Light Italic
  • Omnes Medium
  • Omnes Medium Italic
  • Omnes Regular
  • Omnes Regular Italic
  • Omnes SemiBold
  • Omnes SemiBold Italic
  • Omnes Thin
  • Omnes Thin Italic

The Parisine Font Family from Porchez Typofonderie was also updated:

  • Parisine Std Bold
  • Parisine Std Bold Italic
  • Parisine Std Italic
  • Parisine Std Regular
  • Parisine Std Clair – Bold
  • Parisine Std Clair – Bold Italic
  • Parisine Std Clair – Italic
  • Parisine Std Clair – Regular
  • Parisine Std Sombre – Bold
  • Parisine Std Sombre – Bold Italic
  • Parisine Std Sombre – Italic
  • Parisine Std Sombre – Regular


1 2