Web fonts is an emerging technology that enables you, as a designer, to break away from the trappings of such “safe” fonts as Arial and Verdana. Learn how to use alternative typefaces that make your content stand out and promote your brand while your text remains search-engine friendly and screen-reader ready.

1. Goodbye,
Arial and
Verdana.
Hello, Web Fonts!
Michael Opsteegh
21 MAY 2012 • TECHNICAL COMMUNICATION SUMMIT

2. It's said that
95%
of web design is
TYPE
http://www.informationarchitects.jp/en/the-web-is-all-
about-typography-period/
CHUNK FIVE (THE LEAGUE OF MOVEABLE TYPE)

3. Typography
form
gives your content
?
CABIN AND FANWOOD (THE LEAGUE OF MOVEABLE TYPE)

5. @font-face
CSS 2.0 (1998)
RALEWAY (THE LEAGUE OF MOVEABLE TYPE)

8. THIS END-USER LICENSE AGREEMENT (“AGREEMENT”) CONSTITUTES the Portable Document Format (“PDF”); Cascading Style Sheets (“CSS”) employing WARRANTIES, REPRESENTATIONS AND GUARANTEES, EXPRESS OR
A BINDING LEGAL AGREEMENT BETWEEN YOU AND THE HOEFLER the “@font-face” tag; Macromedia Flash (or other) files employing TrueDoc; and docu- IMPLIED, AS TO MERCHANTABILITY, FITNESS FOR ANY PARTICU-
TYPE FOUNDRY, INC., D/B/A HOEFLER & FRERE-JONES (“H&FJ”). READ ments employing Web Embedding Font Technology (“WEFT”). You may not create LAR PURPOSE, OR OTHERWISE WITH RESPECT TO THE TYPEFACES.
IT CAREFULLY BEFORE COMPLETING THE INSTALLATION PROCESS Embedded Documents, except as expressly provided in paragraphs 3.2 and 3.3: IN ADDITION THERE IS NO WARRANTY OF NON-INFRINGEMENT
AND USING THE FONT SOFTWARE. THIS AGREEMENT CONTAINS AND TITLE OR QUIET ENJOYMENT.
DISCLAIMERS OF WARRANTIES AND LIABILITY. BY DOWNLOADING, 3.2. Workflow PDFs. For the sole purpose of providing documents to printers or other
INSTALLING AND/OR USING THE FONT SOFTWARE, YOU CONFIRM outside suppliers for reproduction, H&FJ grants you a limited license to create and cir- 7. DISCLAIMER OF LIABILITY. TO THE EXTENT PERMITTED BY APPLI-
THAT YOU HAVE READ, UNDERSTAND AND AGREE TO BE BOUND BY culate Embedded Documents in the PDF format (“Workflow PDFs”) subject to the fol- CABLE LAW, H&FJ DISCLAIMS ALL LIABILITY FOR ANY LOSS, COST
THE TERMS OF THIS AGREEMENT, AND THAT YOU HAVE THE AU- lowing restrictions: (a) these Workflow PDFs must have “subsetting” enabled, to limit OR DAMAGE, INCLUDING WITHOUT LIMITATION INDIRECT, SPE-
THORITY TO BIND THE PERSON OR ENTITY SPECIFIED ON YOUR IN- to the greatest extent possible the number of characters of the Typefaces embedded; CIAL, CONSEQUENTIAL, OR INCIDENTAL DAMAGES, INCLUDING
VOICE TO THE TERMS OF THIS AGREEMENT. IF YOU DO NOT AGREE (b) Workflow PDFs must be configured to be “non-editable,” to prevent the alteration, ANY LOST PROFITS OR LOST SAVINGS, LOSS OF GOODWILL, BUSINESS
TO THE TERMS OF THIS AGREEMENT, DO NOT INSTALL THE FONT addition, deletion or extraction of any text, by any party other than the licensee; (c) INTERRUPTION, WORK STOPPAGE, LOSS OF DATA, OR COMPUTER
SOFTWARE. Workflow PDFs must be transmitted individually, on a one-to-one basis, over a closed FAILURE, DAMAGE OR MALFUNCTION, OR FOR ANY CLAIM BY ANY
network. Under no circumstances will this Agreement be construed to entitle you or PARTY, EVEN IF H&FJ HAS BEEN APPRISED OF THE POSSIBILITY OF
1. Grant of License. H&FJ hereby grants you a limited, non-exclusive, non-transferable your agents or assigns to broadcast Workflow PDFs, or any form of Embedded Docu- SUCH DAMAGES, AND REGARDLESS OF THE THEORY (CONTRACT,
license to install and use the fonts and font software specified on your invoice (the fonts ments, over public computer networks, including but not limited to publicly accessible TORT OR OTHERWISE) UPON WHICH SUCH CLAIM IS BASED.
and font software are hereafter referred to individually and collectively as the “Typefac- pages on the World Wide Web.
es”) on only the fixed number of computers at the fixed number of locations specified on 8. Breach and Termination. This Agreement is effective until terminated. H&FJ re-
your invoice. You agree not to duplicate, reproduce, sell, transfer, license, or otherwise 3.3 Flash Files. For the sole purpose of creating vector graphics for inclusion on web serves the right to terminate this Agreement and any or all of your rights hereunder
distribute the Typefaces in any form, except as expressly provided herein. You agree pages, H&FJ grants you a limited license to create and circulate Embedded Documents effective immediately if you fail to comply with any term of this Agreement, including
not to decompile, modify, reformat, translate, reverse-engineer or otherwise discover in the SWF format (“Flash Files”), subject to the following restrictions: (a) Flash Files without limitation by exceeding the scope of the license granted in paragraph 1 above.
the source code of the Typefaces, or to embed the Typefaces in electronic documents must have “subsetting” enabled, to limit to the greatest extent possible the number of Upon any such termination you will destroy the original and all copies of the Typefaces
except as expressly permitted below (see paragraphs 3 and 4.) You agree not to make, characters of the Typefaces embedded; (b) Flash Files must be “static,” not “dynamic,” and cease all use of the Typefaces and the Trademarks. The termination of this Agree-
or authorize or commission others to make, any additions, deletions or modifications to, as to prevent any party other than the licensee from specifying, selecting, copying, cut- ment shall automatically, and without any further action by H&FJ, terminate and ex-
or derivative works or fonts based on or substantially similar to, the Typefaces without ting, pasting or modifying the text that is displayed in the Typefaces; (c) Flash Files tinguish the license granted herein. H&FJ reserves the right to make routine inspec-
the prior written consent of H&FJ. You agree not to alter H&FJ’s copyright notices as must be configured to “Protect from Import.” tions of the Typefaces, to which end you agree to surrender the Typefaces to H&FJ,
contained in the Typefaces. by e-mail, immediately upon receipt of written notice. YOU HEREBY WAIVE ANY
4. Non-Embedded Digital Formats. For the sole purpose of publishing electronic docu- AND ALL CHALLENGES TO, OR CLAIMS OR DEFENSES REGARDING,
2. Intellectual Property Rights. You acknowledge that H&FJ is the exclusive owner ments (such as web pages) that use the Typefaces, but that are not Embedded Docu- H&FJ’S RIGHTS IN THE TYPEFACES, H&FJ’S RIGHT TO TERMINATE
of all worldwide right, title and interest in and to the Typefaces, including without ments, H&FJ grants you a limited license to distribute images of the Typefaces in indus- THIS AGREEMENT PURSUANT TO THE TERMS HEREOF, AND H&FJ’S
limitation all copyright, patent, trademark, trade secret and other intellectual property try-standard digital formats (collectively “Image Files”) solely for the purposes set forth RIGHTS TO CARRY OUT INSPECTIONS OF THE TYPEFACES AS PRO-
rights, in and to the Typefaces as artwork, software, and otherwise, including all cop- herein, subject to the following restrictions: (a) Image Files must feature fixed images VIDED HEREIN.
ies of the Typefaces, regardless of the format in which they are expressed or the media of specific applications of the Typefaces rasterized in a pixel grid; (b) Image Files must
on which they are recorded. Any and all updates, revisions, enhancements or addi- not feature scalable or non-scalable outlines of the Typefaces, or permit the extraction 9. Governing Law; Jurisdiction and Venue. This Agreement shall be governed by and
tions to the Typefaces shall automatically be deemed to be included in the definition of or extrapolation of scalable or non-scalable outlines of the Typefaces; (c) Image Files construed under and in accordance with the laws of the State of New York, applicable
“Typefaces” hereunder and shall become part of, and subject to, this Agreement. You must not permit the alteration of the text by any third party; (d) Image Files must not to contracts entered into, and to be fully performed in, that state. All suits concerning
acknowledge that H&FJ shall be the exclusive owner of all worldwide right, title and include more than 50% of the character set of any individual style of the Typefaces; and the interpretation, breach, or enforcement of this Agreement shall be brought only in
interest in and to any and all modifications of, and derivative works and fonts based on (e) no character featured in Image Files may be greater than 500 pixels in height. Im- the United States District Court for the Southern District of New York, or, if that
or substantially similar to, the Typefaces, regardless of who made such modifications age Files include, but are not limited to: Joint Photographers’ Expert Group (“JPEG”) Court does not have subject matter jurisdiction, then in Supreme Court of the State of
or derivative works or fonts. The names of these Typefaces are trademarks of H&FJ files; Graphics Interchange Format (“GIF”) files; Portable Network Graphics (“PNG”) New York, New York County. The parties consent to personal jurisdiction and venue
(“Trademarks”). All goodwill that may become attached to the Trademarks as a result files; Tagged Image File Format (“TIFF”) files; non-vector Picture (“PICT”) files; and in those Courts for such suits. This Agreement will not be governed by the United Na-
of your use of the Typefaces shall inure to the exclusive benefit of H&FJ. You agree not Bitmap (“BMP”) files. tions Convention on Contracts for the International Sale of Goods, the application of
to challenge H&FJ’s rights in or to the Typefaces or the Trademarks or the validity of which is expressly excluded.
any intellectual property or other right of H&FJ therein, or to infringe H&FJ’s rights 5. No Transfer of Rights. You shall not sell, lease, sublicense, allow to use, or otherwise
therein. This Agreement is not a grant to you of any right, title or interest in or to the assign or transfer any of your rights, duties or obligations under this Agreement, in 10. Miscellaneous. This Agreement represents the entire understanding and agreement
Typefaces or the Trademarks except for the limited, non-exclusive, non-transferable whole or in part, to any person or entity. Without limiting the foregoing, Typefaces between the parties hereto with respect to the subject matter hereof and supersedes all
license to install and use the Typefaces as set forth in paragraph 1 above, subject to the licensed for use by a specific publication shall not be transferred to or used by other prior negotiations, representations and agreements, either express or implied, between
Hoefler & Frere-Jones EULA
terms and conditions of this Agreement. All rights not expressly granted herein are publications owned or managed by a common corporate parent, and/or affiliated with the parties with respect to the subject matter hereof. The failure of H&FJ to insist upon
reserved to H&FJ. the specific publication to which this license has been granted, without the purchase of strict adherence to any term of this Agreement on any occasion shall not be construed
an additional license from H&FJ. as a waiver and shall not deprive H&FJ of the right thereafter to insist upon strict
3.1. Embedding. “Embedded Documents” are those which contain a copy of the Type- adherence to that term or any other term of this Agreement. If any provision of this
faces, or data describing the shape or outline of any part of the Typefaces. Embedded 6. NO WARRANTY. THE TYPEFACES ARE PROVIDED “AS IS.” TO THE Agreement shall be held by a court of competent jurisdiction to be contrary to law, that
GOUDY BOOKLETTER 1911 (THE LEAGUE OF MOVEABLE TYPE)
Document formats include, but are not limited to: Acrobat (or other) files employing EXTENT PERMITTED BY APPLICABLE LAW, H&FJ DISCLAIMS ALL provision will be enforced to the maximum extent permissible and the remaining provi-

9. Font Rendering
ADOBE CASLON PRO (ENLARGED FROM 72PTS)

10. font-family: Helvetica, ‘Helvetica Neue’,
Arial, sans-serif;

11. Serif Sans-serif Monospace Cursive Fantasy
Georgia Arial Courier Apple Chancery Hattenschweiler
Times Helvetica Lucida Console Comic Sans Impact
Times New Verdana Monaco Zapfino Papyrus
Roman

12. WorkarounDs
Static Image
sIFR
FLIR
Cufon
Image Replacement
BLACKOUT TWO A.M. AND MIDNIGHT (THE LEAGUE OF MOVEABLE TYPE)

13. @font-face 4.0 3.5 4.0 3.1 10.0 3.2 2.2
TrueType/ 9.0 3.5 4.0 3.1 10.0 4.2 2.2
OpenType (ttf/otf)
SVG Font (svg/ 4.0 3.2 9.0 3.2 3.0
svgz)
Embedded 4.0
OpenType (eot)
Web Open Font 9.0 3.6 5.0 5.1 11.1 5.0
Format (woff)
http://www.caniuse.com/fontface
CANTARELL (GOOGLE WEB FONTS)

14. Self host
or
use a hosting
service?
ORBITRON , LEAGUE SCRIPT THIN, AND KNEWAVE (THE LEAGUE F MOVEABLE TYPE)

15. @font-face {
font-family: ‘SortsMillGoudy’;
src: url(‘../fonts/GoudyStM.ttf’);
font-weight: normal;
font-style: normal;
}
Self-Hosting
COURIER

16. @font-face {
font-family: ‘SortsMillGoudy’;
src: url(‘../fonts/GoudyStM.ttf’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘SortsMillGoudy’;
src: url(‘../fonts/GoudyStM-Italic.ttf’);
font-weight: normal;
font-style: italic;
}

17. @font-face {
font-family: ‘SortsMillGoudy’;
src: url(‘../fonts/GoudyStM.ttf’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘SortsMillGoudy’;
src: url(‘../fonts/GoudyStM-Italic.ttf’);
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: ‘SortsMillGoudy’;
src: url(‘../fonts/GoudyStM-Bold.ttf’);
font-weight: bold;
font-style: normal;
}

18. @font-face {
font-family: ‘SortsMillGoudy’;
src: url(‘GoudyStM-webfont.eot’);
src: url(‘GoudyStM-webfont.eot?#iefix’)
format(‘embedded-opentype’),
url(‘GoudyStM-webfont.woff’)
format(‘woff’),
url(‘GoudyStM-webfont.ttf’)
format(‘truetype’),
url(‘GoudyStM-webfont.
svg#SortsMillGoudyRegular’)
format(‘svg’);
font-weight: normal;
font-style: normal;
}

19. Subsetting
OPTIONAL—SPACE CONSIDERATION

20. <script type=”text/javascript” src=”http://use.
typekit.com/jsc1yga.js”></script>
<script type=”text/javascript”>try{Typekit.
load();}catch(e){}</script>
<link href=’http://fonts.googleapis.com/css?fa
mily=Cantarell:400,400italic|Lusitana:400,700’
rel=’stylesheet’ type=’text/css’>
Hosting Options—Sample Code for HTML
TYPEKIT (TOP) AND GOOGLE WEB FONTS (BOTTOM)

21. p {
font-family: ‘SortsMillGoudy’, serif;
}
Font Family Declaration
TYPEKIT (TOP) AND GOOGLE WEB FONTS (BOTTOM)

22. Michael Opsteegh
octechwr i ter @ya h oo.com
LOVERS QUARREL AND CABIN (GOOGLE WEB FONTS)