Using Canvas, SVG, and Web Fonts - HTML5 Advertising - page 82

Web Font Licensing
Though there are many free, open-source web font services on the Web, including Google's and Adobe's Typekit,
you may be wondering how you can access licensed fonts from well-established font foundries—Helvetica Neue,
Futura, and Myriad, to name a few. There are paid services on the Web for licensing fonts, such as some from Typekit's
Monotype and WebType. These services, which provide many of the popular fonts most of your brands are or could be
using, use a rental license business model. They either allow the developer to host or provide hosting, as well as easing
a common problem by handling browser fragmentation. You shouldn't be shocked to learn that purchasing a font
license to use a specific font in certain creatives doesn't mean you can also use it in web embedding, or @font-face .
There are specific licenses for @font-face ; they are typically sold separately from the specific foundry. Before starting
a campaign you're your advertiser, find out if they've already purchased the font licensing for their site. If they have,
you can more than likely use it for their ad campaigns. More information about web font EULAs (end-user license
agreements) can be found at blog.themeforest.net/general/font-licensing-for-the-web .
Web Fonts in Advertising
It's pretty obvious that an advertiser's marketing team expects you to use the brand's identity and specific font
family in any campaign you design. As Flash and the font-rendering engine it used recede into the past, you'll need
to leverage web fonts using newer web standards. This definitely raises some concern for publishers, as k-weight
limitations for additional font families will need to be revised. As you've seen, the Oxygen font family could add 100
kilobytes or so to the overall size of all file formats and supply the whole gamut of fonts for cross-browser ad serving.
So take a tip from Google: detecting a user agent on request and serving the appropriate file makes the most sense,
especially if users are on devices with cellular connections and limited bandwidth.
Since you'll want to support all the various formats to allow for a seamless cross-browser experience, another
thing to mention is making sure your ad server's mime type can handle updated file formats before going live in a
production environment. Also please don't use solutions like the JavaScript library called Cufon [ http://cufon.
shoqolate.com ] . They can render web fonts, but they can cause accessibility and performance problems and take a
long while to load due to the increased file size. Many discussions concern supplying web fonts for mobile visitors,
as their download costs are higher and the wait to get to their content is much longer. Even so, I think advertisers
and brands want a consistent experience, no matter what device or screen a user is on. So whether or not to provide
special web fonts for mobile users is really an advertiser's call. However, you should outline the concerns of speed vs.
visual continuity to your clients, then allow them to make the decision. In some cases publishers and content owners
may not want to budge, may just say no to any web fonts in their mobile advertising inventory. Be sure to keep this in
mind when you plan use of web fonts across publishers and ad networks.
Another common issue in non-Webkit browsers like Firefox and Opera is dealing with FOUT (flash of unstyled
text). Chances are it will come up sooner rather than later. FOUT refers to content being rendered to the screen
before the style on the type is set. A nice trick to get around this problem, found in Google's free web service, involves
leveraging a JavaScript technique to detect when the style has loaded. If you're not using Google's service, you can
hide all onscreen copy for 2 to 5 seconds and then toggle its visibility on. Hacky, for sure, but as Listing 4-15 shows,
it works.
Listing 4-15. Paul Irish's FOUT Script
<script>
(function(){
// if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT,
from paulirish.com
var d = document, e = d.documentElement, s = d.createElement('style');
if (e.style.MozTransform === '' || e.style.OTransform === ''){
s.textContent = 'body{visibility:hidden}';
var r = document.getElementsByTagName('script')[0];