B2B Articles - June 06, 2010
HTML5 brings a lot of new and exciting features to the web design community. Web design blogs have been filled with discussions of HTML5 font native support and web video/audio support.
A lot of other features deserve your attention as well, such as the canvas elements, CSS 3 transitions, and font support.
Font support will greatly enhance the look and feel of the web since the former constraints of a limited palette of typography choices are lifted.
With HTML5, designers can use a font that is not present on the viewer's machine--yet still display the font. Font products that support the WOFF font format can be used on a web page as real text. The declaration @font-face will allow for the display of new typography options on the web.
WOFF is not the first technology of its kind that allows for the download of new typography options for the web. WOFF will be the preferred way to display new fonts.
Below: Here is an example usage of @font-face within CSS:
@font-face {
font-family: 'BL Avenir Black';
src: url('fonts/BLAvenirBlack-webfont.eot');
src: local(' '),
url('fonts/BLAvenirBlack-webfont.woff') format('woff'),
url('fonts/BLAvenirBlack-webfont) format('truetype'),
url('fonts/BLAvenirBlack-webfont.svg#webfont') format('svg');
}
Using double declarations: one for Internet Explorer and one for the rest:
@font-face {
font-family: 'BL Avenir Black';
src: url('/font-folder/arial_black-webfont.eot');
}
@font-face {
font-family: 'BL Avenir Black';
src: url('/font-folder/arial_black-webfont.woff');
}
Notice that the font is stored on the server, and the path is specified so the user system can reference the font file formats. In the definition above, we are referencing Paul Irish's Bulletproof @font-face syntax, which, for example, provides a .eot font for Internet Explorer and backup formats in .ttf and .otf.
There are several others out there that have published helpful articles on bulletproofing @font-face as well, to name a few: Mark Pilgrim and Jonathan Snook.
Using conditional statements for @font-face for Internet Explorer can make such an ugly and wasteful mess. Instead, you can use double declarations to provide IE with the .eot font format. Currently, only Firefox is supporting WOFF font formats--other browsers plan to in future releases.
To learn more about HTML5 and fonts, we recommend looking at Paul Irish's: Bulletproof @font-face syntax: https://paulirish.com/2009/bulletproof-font-face-implementation-syntax/. Paul Irish does a great job of breaking down the concept and demonstrating real-world and helpful examples.
Another recommendation that we can make would be to use fontsquirrel.com for fonts that you have the right to use. This very helpful tool can create a small toolkit for web developers and designers to convert fonts into WOFF or EOT formats. Take a look: https://www.fontsquirrel.com/fontface/generator
Tel 212-993-7809
Ironpaper ®
10 East 33rd Street
6th Floor
New York, NY 10016
Map
New York Agency
B2B marketing
B2B Content
Demand generation agency
Digital Marketing
Account-Based Marketing
ABM for SaaS
ABM for energy
Demand generation campaigns
Industry marketing
Privacy Policy
First-party data marketing
SaaS marketing
SEO for B2B
IoT Marketing
B2B Marketing for IoT Companies
HubSpot Agency
B2B Product Marketing
B2B Software Marketing
IoT go-to-market strategy
IT Marketing
HubSpot for ABM
ABM for AI companies
Technology Marketing
Marketing for IT Companies
ABM Campaigns
B2B lead generation
B2B Marketing and Growth Agency.
Grow your B2B business boldly. Ironpaper is a B2B marketing agency. We build growth engines for marketing and sales success. We drive demand generation campaigns, ABM programs, B2B content, sales enablement, qualified leads, and B2B marketing efforts.