Web Fonts Process Information Session
Design and Learning Architect Studios
A more in-depth presentation of the Process will be
scheduled with Design as a follow up to this presentation.
02/20/2014
Agenda
• Background (Fiadhna Gannon):
•
•
•
• History of the Flash to ePub Transition
• OpenType Print Font Challenges in ePub3
• Web Fonts: An introduction
• Web Font Process Initiative Background
• Web Font Challenges Summary
Web Fonts Process:
• High-Level Process (Fiadhna Gannon)
• Detailed End to End Process: What’s relevant for Design & Learning
Studios (Kay Selke)
• Design Visual Issue Resolution Guide (Jerry Malone)
• RACI (Lisa DiBattista)
Web Fonts Next Steps (Fiadhna Gannon)
Q&A
The Web Font Process Initiative Working Group
Product Strategy & Requirements (Fiadhna Gannon)
Design Architecture (Kay Selke, Jerry Malone, Lisa DiBattista)
Content Engineering (Stephen Goggin, Ciara Flanagan)
Font Support (Joan Werlinsky and David Wettengel)
2
History of the Flash to ePub Transition
Flash-based
eBook
•
•
•
Image-based, static content
Not mobile compatible
Used OTF print fonts
Market shift
towards HTML5
ePub3
eBook
•
•
•
Dynamic content
Compatible with mobile (HTML5based content)
Use of OTF fonts presented issues
HTML5 drove the
need for Web Font’s
3
OpenType Font Challenges in ePub3
Pros
Cons
The DEAL BREAKER:
OTF fonts are incompatible with IE10 and iOS7.
4
Web Fonts – An introduction
What are Web Fonts?
• A “web font” is type face font software that has been created and optimized for displaying and styling
text online via web browsers
Advantages:
•
•
•
•
Web fonts display consistently across browsers and operating systems
Web fonts are often optimized for screen display
Designed for quick loading
Open Type
Licensed for digital use
Fonts
Four font types in a web font delivery package:
•
•
•
•
WOFF: Moving toward becoming the standard across browsers
EOT: Used for Windows
SVG: Legacy format - required for Android devices
TTF: Can’t be included in HMH ePub3 products due to licensing
compliance issues
.otf
Web Fonts
.woff
.eot
.svg
.ttf
5
Web Font Process Initiative Background
Problem Description:
As Web Fonts were introduced to HMH for digital content deliveries; two core challenges from a technical and
compliance perspective were identified that required quantification, analysis and resolution:
1. Technical: The method to analyse and select replacements was non-standard. In addition, as Web Font
replacements are not an exact replica of Print fonts, the use of Web Fonts in ePub3 based content has resulted
in content rendering/display issues.
2. Compliance: In order to meet compliance and licensing regulations; a Web Font type (TTF), included in the
delivery package to HMH, needed to be removed from content deliveries prior to release to market and/or
retrospectively updated post release.
Approach:
A team was established across CDG (Design Architecture, Content Engineering) & TG organisations (Font Support).
This team conducted an in-depth analysis of the issues, identified and proposed solutions, which were reviewed and
approved by cross-functional stakeholders.
Solution summary:
To address Web Font rendering issues; process efficiencies were identified to:
1. Ensure that the majority of rendering/display issues were identified and resolved upstream,
minimizing downstream impact.
2. Ensure that the appropriate downstream processes were in place to ensure rendering/display
issues were resolved prior to content market release.
To address compliance and licensing issues; measures were taken to:
1. Ensure that the compliance and licensing position regarding which Web Font types can and cannot
be used, including associated rationale, was documented and communicated.
2. Validated that removing non-compliant Web Font types did not present any additional rendering
or other technical issues.
3. Ensure appropriate processes were in place to mitigate compliance & licensing risk to the business.
6
Web Font Challenges: Summary
Technical Problems
• Not all print fonts in HMH products have web font equivalents.
• Web font libraries must contain ONLY the fonts used in a project,
not full families.
• Web font spacing is often slightly different than print font versions.
• We don’t yet have a mechanism to pre-view HMH content within a
browser.
• TTF font must be removed prior to inclusion in product.
• Limitations within our vendor’s delivery system (20 fonts per set).
7
Web Fonts Process
High-Level Web Font Process Overview
Font Due
Diligence
• The process by which Production
Vendors source the list of print fonts
used in a project/product/program –
serves as a necessary input to
identify web font equivalents
Font
Validation &
Replacement
• Process by which web font
equivalents to print fonts are
identified and validated – involves
Font Support & Design Studio
Font Delivery
• The process where web fonts are
packaged and delivered to Build
Studio for implementation
Sample Page
Types
(Iterative)
• Sample ePub3 pages are
produced by Production
Vendors prior to full production
implementation – full review
by Design & Learning Studios
Production
9
• ePub3
Development/
execution phase
Detailed End to End Process
End to End Webfonts Process – existing Programs
Production Vendor (PV)
Font Selection & Delivery Process (Pre-Production) Phase
Sample Page Type Creation (Pre-Production) Phase
9
Remove TTF
fonts from
Package
8
Conduct V&V of
webfonts
Any changes to
webfonts must be
added to PrintWeb Font Mapping
Document &
approved by FS
14
Conduct V&V of
webfonts
10
Produce sample
ePub3 page
types
Production Manager (PM)
2.
Submit initial
webfont request
to FS
2.5
Submit updated
request to FS
(Refer to
checklist)
Quality
Assurance (QA)
2.2
Source PDF/
InDesign & save
to FTP
2.3
Initiate Font
Due Diligence
with Vendor
TPS Comp
3
Conduct
Web Font
Analysis
10
16.2
Refer to Issue
Resolution Matrix
to resolve web
fonts issue
13
Initiate
Production
Start
11
Submit sample
pages to DA for
review
12.1
Acknowledge
Receipt
20
Final Pass &
Release
3.1
Create Print-Web
Font Mapping
Document
17
Execute QA
(standard JIRA
workflow)
17.1
Refer to Issue
Resolution
Matrix & resolve
issue
6
Webfont &
Compilation
and Delivery
3.2
Webfonts
Gaps?
Yes
5
Approve
Mapping Doc
Iterative Cycle
3.3
Share mapping
document with
DA
(listing gaps)
18.2
Update Web Font
Issue Resolution
Guide
11.2
Produce Web Font
Issue Resolution
Guide
4.1
Add identified
fonts to mapping
Doc
Design Architecture (DA)
Font Support (FS)
No
No
7
Initiate Sample
Page Type
Creation
6.1
Acknowledge
Receipt of web
fonts
Yes
2.1
Is font due
diligence
required?
16.1
Apply guidelines
in web font
resolution guide
10.1
Execute QA
(standard JIRA
workflow)
Yes
Any changes to
webfonts must be
added to PrintWeb Font Mapping
Document &
approved by FS
4
Execute
Design
Identification
Process
Learning
Architecture
(LA)
Start
2.4
Receive output
& save to FS
sharepoint
15
Remove TTF
fonts from
Package
Any changes to
webfonts must be
added to PrintWeb Font Mapping
Document &
approved by FS
INITIATE V&V OF PDF INPUTS
1.
Establish
scope for
webfonts
delivery
Production (Execution) Phase
16
Execute ePub3
standard
production
process
Start/ End
Process
Step
SubProcess
Connector
Document
11.1
Analyze sample
page types
(Full review)
Decision
Any changes to
webfonts must be
added to PrintWeb Font Mapping
Document &
approved by FS
No
19
Build sign off
18
Build Review
(smoke test)
12
Sample Page Types
Sign off/Build
Datastore
18.1
Updates to Issue
Resolution
Guide?
Offpage Connector
Link from
other process
Link to
other process
Annotation
DA/LA Steps within Print and Web Font Process
11
Design Visual Issue Resolution Guide
RACI
13
HMH Primary Font Documentation
14
Process Document Outputs
 End to End Process Flow (Visio) – existing programs
 RACI – Roles & Responsibilities Matrix
 Visual Issues Resolution Guide – Design Guide for Build Studio
 Production Issues Resolution Matrix
 Production Manager Checklist
 Production Vendor Checklist
15
Documentation Descriptions & Locations
Output
Description
Sharepoint Location
Font Support Documentation – hosted on Font Support Sharepoint
Font Due Diligence

A vendor-generated report that identifies all fonts embedded in PDF source files
Print to Web Font Mapping
Document

A project-specific document that matches print font names to their web font
replacements
WYSIWYG

The HMH Approved OpenType Collection WYSIWYG – This document provides a visual
representation of every font in the HMH Approved OpenType Collection. It can be used
by vendors to determine if a font is displaying as expected
https://today.hmhco.com/teams/co
ntdevprmgt/TPD/SitePages/Home.
aspx
Process Documentation – hosted on Production Management Sharepoint
RACI


Roles & Responsibilities Matrix
List the functions Responsible, Accountable, Contribute, Inform varies aspects of the
process
End to End Process Flow (Visio)


End to end step by step workflow for existing programs
Three phases of process: Font Selection & Delivery, Sample Page Type Creation & Production
Design Visual Issues Resolution
Guide



Global and project specific rule-sets
Adjustment parameters for Web Fonts i.e. point size, height etc.
Includes visual examples
Production Issues Resolution Matrix


Relevant to Production Management, QA, Production Vendors
Outlines expected issue types and where to route issue for resolution
Production Manager Checklist

Cover specific Production Management checklist items:
 Web Font Requests
 Font Due Diligence
 Post Web Font Delivery
Production Vendor Checklist

Cover specific Production Vendor checklist items:
 Check TTF fonts have been removed
 Search for fonts in CSS
 Font mis-match
16
https://today.hmhco.com/teams/F
SIR/Web%20Font%20Resources/
Forms/AllItems.aspx
Web Fonts – Next Steps
Q1 2014 on-going activities
Q1 2014 Web Fonts Improvement Areas
Improvement Area
Goal
Owner
Design Print and Web Font Process
To ensure that Print & Web Font libraries accurately reflect
the print and web fonts used in a product delivery
Design Studio
(With support from LA, TPS
Comp, FS)
Mechanism to pre-view web fonts during
the web font replacement process
Enable Design Studio to pre-view webfonts prior to web font
replacement selection (currently only possible to view web
fonts post during content production)
Design Studio
(With support from Content Eng
& LA)
Reduce the number of downstream re-work in terms of
adjusting web font parameters (size, line height etc.) during
production cycles
Explore the opportunity to alter web font
delivery mechanism to exclude TTF font
types
Ensure that only compliant web font types are delivered to
Build Studio for implementation
Font (Print & Web) selection for new
Programs
18
Reduce the number of fonts that are used in print & digital
deliveries
Only select print fonts that have licensed web font
equivalents
Font Support
Design Studio
(With support from LA & FS)
Appendices
Various documents supporting initiative
and resolutions
Primary Issues & Solutions
Process
Category
Problem Statement
Current Process Gaps
Solutions
Font metadata
collection
A process has not been established to
identify the specific print fonts required
for a webfont digital delivery
The process by which FS and Build Studio
(BS) approach the sourcing of the required
print font information requires
standardisation:
Where applicable, a ‘once off’ font due
diligence exercise is conducted by
Production Vendors (output information
stored by FS in a centralised location)
 Print font library may not exist
 In the scenario where Production Vendors
have sourced print fonts list; they have not
been provided with the set of output
requirements

 In this instance, the necessary information
to enable effective font replacement
analysis to be conducted, is not
consistently available to Design
Architecture (DA) (i.e. contextual
reference)
 Font due diligence outputs provides
the necessary information to design
(requires centralized location to
source InDesign)
 During font replacement analysis,
engagement with Learning Architecture
(LA) has not been formalised across
projects
 Prior to webfont selection, sampling
of page types in InDesign to be
conducted by DA & LA
 In the scenario where a print font
library does exist, the library hosts
the print font families associated
with a project (contains approx. 3060% more fonts than required for
webfont delivery)
Font
Replacement
Identification
20
In the scenario where a webfont
equivalent cannot be identified, the
method to analyse and decide
replacements has not been
standardised
POC required with Hurix & Magic
Primary Issues & Solutions
Process
Category
Problem Statement
Current Process Gaps
Solutions
Font Replacement
Identification
Webfonts
replacements are not
an exact replica of a
print font i.e. point
sizes, line leading etc.
may differ
 Production vendors are not in a position
to make judgements about font size,
line leading etc.
 Sample print InDesign pages to be reviewed by
DA, LA prior to webfont list being submitted to
Production Management (PM) – [Content Eng. &
FS to be consulted]
 Production vendors are not consistently
provided with the necessary instruction
to make adjustments when applying
webfonts to an ePub3 page
 Production vendors to create sample pages prior to
production start (iterative cycle)
 To be reviewed & approved by LA & DA
 Output of sample page creation = a Design
Visual Issue Resolution Guide
 Apply Visual Issue Resolution Guide during
production (build reviews to be conducted by LA &
DA)
Webfont Delivery
Webfont
Implementation Issue Handling
21
The webfonts delivery
package to build
studio include fonts
types (TTF) that have
not been obfuscated,
therefore cannot be
used
 Production teams, that have delivered
or are in the process of delivering
webfonts, have not received a
communication to remove TTF from the
font package
 Request Monotype to alter delivery system and
remove TTF & SVG webfonts from deliveries to
HMH
As issues arise during
webfont
implementation; BS do
not know when/ how
to engage with LA, DA
& FS
 BS do not know how to differentiate
between Design, LA & Font Support
Issues

BS need to be educated in terms of the types of
issues that are relevant to Design, LA & Font
Support (WIP)
 BS do not know how to route issues to
appropriate team to resolve (particularly
if no DA/LA representative on project
team i.e. OWE)

Bugs that are logged by Production Vendor & QA
in JIRA to be triaged with Design, LA & Font
Support, Engineering (WIP)
 In the interim, provide the necessary instructions to
Production Vendors to remove/ignore TTF & SVG
webfonts
Print to Web Font Mapping Document Sample
Project
SS_TX_SE_Gr 7-12
Type of Analysis
Web Font Mapping
Type of Project
ePub/ebook
Project font library?
N/A
Date
11/12/2013
SAP Project Code
PD1582501
JIRA # (if available)
n/a
Key:
Action/Replacement Required
Replaced in Previous Program
Need More Information
Replacement Recommended
Print Font Name
Web Font Name
Adobe Garamond Bold
Frutiger-ExtraBlackCn
Notes
Adobe Garamond W01 Bd
FrutigerLTW01-87ExtraBk
Frutiger-Light
FrutigerLTW01-45Light
FrutigerSA-Bold
convert to image
No web font version available.
Respellville Italic
TMS Phonetic W01 Regular
Design understands that replacement font
will not be italic.
22
Font Due Diligence Template - Sample
Due Diligence Specifications for Fonts and Font Attributes in PDFs
The report should be in excel format. It should be sorted by font name.
1. List all fonts present in PDF files, along with type (PostScript, OpenType, or TrueType). Fonts should be listed by weight and not
just by family. This should include all fonts embedded in the PDF, including fonts embedded in placed art (eps, ai., and .pdf)
2. Report on which fonts are not in the HMH Approved Collection. (Compare list of fonts against HMH Approved Collection (OT
only))
3. List of PDF file names in which fonts are found.
Metadata required in report:
1.
2.
3.
4.
Font name (including all weights)
Font Type (Postscript, OpenType, or TrueType)
HMH Approved? (Is it present on the HMH Approved OpenType font list? Yes or No)
PDF location (name of PDF in which font is found)
File Name
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
2_WNLFSE_BM.pdf
23
PostScript font name
MahoganyScriptStd
FrutigerLTStd-Black
Minion-Semibold
Minion-Regular
FrutigerLTStd-BlackCn
Helvetica-Condensed-Bold
Helvetica-Condensed-BoldObl
Helvetica-Condensed-Oblique
Futura-Condensed
KhakiStd-1
FrutigerLTStd-LightCn
FrutigerLTStd-BoldCn
HMSFrutigerCondStdLightItalic
FinkHeavy
FrutigerLTStd-Cn
TFForeverBold-Normal
Minion-Italic
HMH Approved
YES
YES
NO
NO
YES
NO
NO
NO
NO
YES
YES
YES
YES
YES
YES
NO
NO
Type
Type
Type
Type
Type
Type
Type
Type
Type
Type
Type
Type
Type
Type
Type
Type
Type
Type
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
Embedded as
Type 1
Type 1
Type 1
Type 1
Type 1
Type 1
Type 1
Type 1
Type 1
Type 1
Type 1
Type 1
Type 1
Type 1
Type 1
Type 1
Type 1
Subset
no
no
no
no
no
yes
yes
yes
yes
no
no
no
no
no
no
no
no
Encoding
Custom
Custom
Custom
Custom
Custom
Custom
Custom
Custom
Custom
Custom
Custom
Custom
Custom
Custom
Custom
Custom
Custom
Issue Resolution Matrix - Examples
Issue Type
Possible Cause
Missing web font entry in
CSS
Operator error when
searching CSS
Name mismatch between
mapping document and CSS
Delivery error
Missing web fonts from
font folder
Delivery error
Font appearance does not
match font in PDF
Error with implementation of
CSS manifesting as reversion
to default font
Corrupt font manifesting as
reversion to default font
Incorrect font was delivered
24
Resolution
Additional Information
path/Owner
PV
To prevent incorrect missing fonts being reported to FS, important that PV
checks the CSS:
 Fonts are not always in alphabetical order in CSS which can lead to the
appearance of missing fonts.
 PV to use "search" to find the font in the CSS doc.
FS
 PV to Log issue in JIRA and assign to PM
 PM to email Font Support Alias ([email protected])
 FS to revert with response within 4 hours, and solution within 48
hours. The SLA for more complex issues will be agreed by project team
FS
 PV to Log issue in JIRA and assign to PM
 PM to email Font Support Alias ([email protected])
 FS to revert with response within 4 hours, and solution within 48
hours. The SLA for more complex issues will be agreed by project team
FS
 PV to Log issue in JIRA and assign to PM
 PM to email Font Support Alias ([email protected])
 FS to revert with response within 4 hours, and solution within 48
hours. The SLA for more complex issues will be agreed by project team
PV
To prevent incorrect web font corruption bugs being reported to FS,
important that PV check the CSS to make sure it is correctly implemented
before sending to FS as a font corruption bug
FS
 PV to Log issue in JIRA and assign to PM
 PM to email Font Support Alias ([email protected])
 FS to revert with response within 4 hours, and solution within 48
hours. The SLA for more complex issues will be agreed by project team
FS
PV should to distinguish between a system/default font and the wrong
font. See Visual Issue Resolution Guide for examples.
(A correct assessment of a wrong font could be an ital instead of a roman,
or a serif face when a san serif face is expected).
When it has been validated that an incorrect font has been delivered route
to FS for redelivery:
Production Management Checklist
Category
Web Font Request Requirements
Checklist Items and Best Practices

PM to give advance notice of a web font request to FS, DA, and TPS Comp. Work with the PM "owner" of
the process to prioritize multiple font deliveries.

One email per web font project request to [email protected]. Subject line should be unique,
contain program information, and the words "web font request". JIRA CDEV # optional.

Web font request email should contain Program Name, Market/Language if applicable, Copyright yr.,
Grades, and Component. (For example, Math Expressions 2015 TX Spanish K-5 SE). Email should also
contain PD # for SAP time tracking, FTP site for delivery, preferably on the Dublin FTP which does not
purge as quickly as ftp.hmhco.com, and Jira # if applicable
Font Due Diligence Process
Due Diligence Specifications for Fonts and Font Attributes in PDFs:
The report should be in excel format. It should be sorted by font name

List all fonts present in PDF files, along with type (PostScript, OpenType, or TrueType). Fonts should be
listed by weight and not just by family. This should include all fonts embedded in the PDF, including fonts
embedded in placed art (eps, ai., and .pdf)

Report on which fonts are not in the HMH Approved Collection. (Compare list of fonts against HMH
Approved Collection (OT only))

List PDF file names in which fonts are found

There should always be two Excel spreadsheets delivered to HMH. One list should contain multiple tabs of
all of the individual components and grade levels, and contain the full reporting information. The second
should be a single collated list of all the fonts occurring in all the components, with references to
components and occurrences removed. This list should contain only font name, font type, HMH Approved
status. Note that these lists will not match the lists of fonts in the FAP font library
Metadata Required in Excel documents:

Font name (including all weights)

Font Type (Postscript, OpenType, or TrueType)

HMH Approved? (Is it present on the HMH Approved OpenType font list? Yes or No)

PDF location (name of PDF in which font is found)
Post Web Font Delivery


25
Production team to download the files as soon as they are posted by FS or TPS Comp, and acknowledge via
email to the sender that the delivery is received
Any changes made to web font assignments by CE, DA/LA, or Engineering Vendor must be shared with
Font Support so mapping document can be updated
Production Vendor Checklist
Checklist Items and Best Practices

Have TTF fonts been removed from package

Be sure to always look in the notes column of the font mapping spreadsheet. Important information is included here, such as text
size adjustments and convert to art instructions.

Search for fonts in the CSS using the "search" function, not by browsing

Except for missing fonts, any troubleshooting issues sent to FS, DA, and CE should be accompanied by screen shots

For "Font Mismatches", vendor should reference the HMH Approved Collection WYSIWYG document to confirm that the mismatch
is not intended

"Font Mismatch" errors should always be accompanied by an explanation of what the mismatch is in order for the production
manager to route properly

If a font is reverting to a system or default font (usually Times), vendor should check the implementation of the CSS before reporting
as font corruption

If there is a character mapping error, is the font an HMH Modified font? If so, vendor should confirm the web font version they are
using was sent after December 15, 2013

When resolving issues, vendor should be sure to give a complete explanation in JIRA so that FS, DA, and CE can add this to the global
knowledgebase

If any web font assignments are changed, FS must always be informed so the mapping document can be updated
26
Service Level Agreements - Web Font Delivery
A standard turnaround time from the beginning of web font analysis to the delivery of web fonts
will be 6-10 business days. This is based on a standard web font request of 150-200 fonts
requested during a period when the workload is considered "normal". For requests over 200
fonts and/or during a period with extremely heavy workloads, the turnaround time on requests will
be decided on a case-by-case basis
Standard Web Font Requests SLA’s:
27
1.
Web Font Analysis (FS): 2-3 days
2.
Design Identification (DA): 2-4 days
3.
Web Font Compilation and Delivery (TPS): 2-3 days
4.
Total: 6-10 days
Web Font Process Points of Contact
Production Management Process Champion: Tony Hetherington
Production Strategy & Requirements: Fiadhna Gannon
Font Support: David Wettengel
Design Architecture: Kathryn Selke, Jerry Malone, Lisa DiBattista
Content Engineering: Stephen Goggin & Ciara Flanagan
28