Incorporating WebINK fonts into your blog
In the past we’ve shown you how easy it is to incorporate WebINK fonts into various blogging services, including Drupal Gardens, Posterous, TypePad, WordPress, and ZenDesk. While the fundamentals haven’t changed, this post contains some important updates.
WebINK blogging basics
The basic steps for using WebINK in most blogging services remain:
- Choose your fonts using WebINK.
- Access the Customize feature of your blog.
- Paste in the WebINK CSS code.
- Modify the style tags in your blog’s CSS to use the WebINK fonts from the WebINK CSS.
You can choose fonts and generate CSS from WebINK.com, or from within Suitcase Fusion 3(which is available for you to demo).
Recent updates
Some updates since the previous posts on this topic:
- In the Posterous article, I claimed that WebINK has fonts from over a dozen foundries, but it’s actually now 23 and climbing. Be sure to check back regularly to this space (and/or subscribe to the blog on the right) for our own Thomas Phinney’s timely and informative posts announcing the most recent additions.
-
Another change since the early days of WebINK is that we’ve dropped support for SVG fonts. Most mobile browsers have evolved to where they now support TrueType or other font formats. iPhone, iPad, and iPod Touch users running iOS 4.2 and later can view TrueType fonts just fine. For users with older devices that don’t support the TrueType or WOFF font formats, you’ll want to ensure that your CSS includes suitable fonts in your fallback stacks.
Most people won’t need to add anything to the CSS that WebINK generates today. However, if you were one of those who followed the instructions in those old posts, you should go back to your CSS and remove the lines that add support for SVG fonts. - Speaking of changes to WebINK, the number of websites you can add to a single Type Drawer was recently increased from 4 to 10. (You can still have as many Type Drawers as you need.) You can now add up to 10 websites through WebINK.com.
A recap of handy tips from past posts
-
Modify the WebINK CSS to use a
font-familyname that represents your usage of the font. This will make it easier to identify and replace the font in the future. See theWordPress entry for more info. - You may want to craft a special blog post that utilizes as many of your custom styles as possible, and save it as a draft for previewing whenever you make CSS changes. See theTypePad post for more on this notion.
- It’s worth restating that WebINK isn’t just for blogs. ZenDesk, for example, lets you implement a Web-based help desk, so WebINK can help you give these types of services a web fonts makeover as well. See the ZenDesk post for an example.
- Some blog services don’t use your subdomain (Example: the “me” in me.someblog.com) for previews. To get around this, you can temporarily add *.someblog.com to your WebINK Type Drawer so previews work properly while you create your CSS. See theTypePad post for details.
WebINK users run the gamut from personal bloggers to designers working for agencies or large corporations. Whatever camp you fall into, WebINK can help give your blog or website a custom finish that can make it more personalized and unique.