'Net Features : web fonts

Fount: Find Fonts You Love

Pete Prestipino — Thu, 21 Feb 2013 13:45:00 GMT

What happens when you come across a font online you’d like to use within your website? Look in the source code? That’s so… archaic. Don't worry, there’s a better way!

Web designers (perhaps even those that are involved with a new site or redesign) should check out Fount, a very handy bookmarklet that provides the ability to identify any Web font in a font stack (e.g. Google Web Fonts or Typekit) that is used on a web page. Fount provides a good amount of information, indicating the font size, weight, and style (bold, italicized, etc.), and works in Safari, Chrome, Firefox, and IE8+.

Users simply click the Fount bookmarklet in their browser toolbar menu, highlight the text using the font, and click again to see the details. Below is a sample one of the fonts we use here on WebsiteMagazine.com.

Related Items at Website Magazine:

- Typography App Eases Design Process
- jQuery Plugins for Increasing Interaction
- Five Fantastic Web Font Services
- 15 Fresh & Free Fonts

Web Font Fun with Javascript Plugins

Administrator — Thu, 28 Jun 2012 19:30:00 GMT

When I first started working on the Web in a professional capacity, there really wasn’t much you could do to dress up your website as it related to font choice.

Web designers had little control over fonts in the past, but that has changed dramatically over the past two years as the pace around jQuery development accelerates and responsive design becomes the norm (or at least more normal).

While it’s possible to manipulate text using CSS, that method still has its limitations. As a result, many turn to Javascript to solve the inherent problems - and the results are often worth a look.

Below you’ll find several javascript plugins that can help you, the designer/developer, modify text through kerning, introducing a responsive nature and even tossing aside all convention with some quite dramatic effects.

SlabText: This Javascript plugin splits headlines into rows before resizing each to fill available horizontal space.

FitText: The plugin renders font-sizes flexible, making it ideal for use in fluid or responsive layouts to achieve scalable headlines.

LetteringJS: For those willing to make a more daring design choices, LetteringJS fits the bill.

jqsloText: This plugin is another for those willing to make some edgy design choices, as it renders an arching effect (gets bigger as you approach the middle and then tapers off) on HTML text.

jQuery Glow: The plugin provides the ability to add a glow effect to text when hovered over.

BigText: This plugin automatically sizes text to fit inside a parent element, resulting in perfectly justified alignment.

Compressed Web Fonts from Google

Pete Prestipino — Wed, 11 Jan 2012 16:30:00 GMT

Google’s affinity for all things speedy is no secret. That is why it should come as no surprise that it has made yet another foray into making the Web even faster - at least as it relates to fonts.

On its official Code blog, Google announced this week a new way to make web fonts smaller (and faster) through collaboration with the Monotype Imaging Fonts.com Web Fonts team.

Google Web fonts now implements Monotype Imaging’s MicroType Express compression format. Using gzip alone, the format should yield approximately 15 percent savings in file size.

Designers won’t need to update their integrations as Google is upgrading the CSS snippet and font files which it has done for previous speed optimizations.

WM Tool-of-the-Day: WhatFont

Pete Prestipino — Thu, 28 Apr 2011 20:55:00 GMT

If you're in the process of a redesign and are busy checking out the competition to ensure your newly retooled Web presence is in line with the competition, check out the WhatFont Tool.

The bookmarklet and Chrome Extension makes it easy to find out what fonts are being used in a webpage.

With the extension installed, by hovering over the font you like, you'll be able to see at a glance what web fonts are in place.

While you could use extensions like Firebug or Webkit Inspector to do the same, WhatFont is a far simpler, far more elegant solution.

A snapshot of the WhatFont tool is below. It's pretty fun to play with so check it out!

Use Any Darn Font You Want FLIR

Pete Prestipino — Tue, 17 Mar 2009 14:45:00 GMT

Do you remember that designer who told you there was simply no way you could use Calibri as the font for your website? Well, he was wrong. Using FLIR - Facelift Image Replacement (or FLIR), an alternative to sIFR that does not require Flash - you can use any darn font you wish. Quick side note - one of the most popular (highest trafficked) posts in November of 2008 was on Web design package CoffeeCup's Web Typography Pack which includes a sIFR Font Maker.

Getting started with FLIR takes just a few minutes. Download, unzip and upload, then choose and configure your fonts. Make the necessary modifications to CSS declarations and selectors and you're pretty much good to go. FLIR is probably best used for making modifications to headlines, subheads, etc. and not as the actual body copy itself.

Designers/developers will need Web servers with PHP and the GD library. There are some issues, but minor ones. The PHP GD library does not render details very well, but FLIR is easier to implement sIFR and does not require Flash to create or view.

Solutions like sIFR and FLIR may be tail chasing as CSS3 will support various webfonts (as do recent versions of Firefox and Safari).

__________

What's One Great Idea Worth?
Upgrade to a professional-level membership from Website Magazine and find out!