SlideShare a Scribd company logo
Font Embedding
  with CSS3
Options

• Font Stacks
• Background Image Replacement
• Flash and Javascript (sIFR)
• Cufon, FLIR
Font Embedding

• Use @font-face to declare font
• point to font file on server
• declare format if needed
• Call font with font-family
Browser Support

• Firefox 3.5
• Safari 3 and 4
• Opera 10
• Internet Explorer 4+
• No Chrome Support - yet
Font Formats


• Open Type (OTF)
• True Type (TTF)
• Embedded Open Type (EOT)
Embed The Font

@font-face {
 font-family: Chunkfive;
 src:url("/fonts/Chunkfive.otf") format('opentype');
 }
Embed The Font

@font-face {
  font-family: Chunkfive;
  src: url("/fonts/Chunkfive.eot");
  src: local(Chunkfive), url("/fonts/Chunkfive.otf")
  format('opentype');
}
Call The Font

.headline {font-family: Chunkfive;}
.headline {font: 2.4em Chunkfive;}
.headline {font: 2.4em Chunkfive, Helvetica,
Arial, sans-serif;}
EOT Format

• Used by IE since version 4
• Only browser to support it
• Most fonts do not have EOT format
• Convert using WEFT or ttf2eot
• Ask for EOT Format
What Now?
Some fonts are
already licensed for
    embedding.
Not All Fonts Are
  Licensed For
  Embedding
Licensing Services

• TypeKit.com (beta)
• Free up to $50/mo
• Up to 280 fonts to choose from
• Javascript + CSS
Font Embedding With CSS3
<script type="text/javascript" src="http://
use.typekit.com/cti5uqi.js"></script>
<script type="text/javascript">try{Typekit.load();}
catch(e){}</script>
Resources

• CSS3.info
• webfonts.info
• typekit.com
• Typotheque.com
• http://delicious.com/tag/webdesignlunch
Fin

www.jeremyflint.com
   @jeremyflint
 jflint@gmail.com

More Related Content

ZIP
What the @font-face
KEY
The state of web typography
KEY
CSS @font-face : Personalized fonts
PPT
Create your on personal website - PowerPoint Presentation
PDF
The State of Web Type
PDF
SEO and Analytics for Wordpress
PDF
Making drupal beautiful with web fonts
KEY
Web Fonts: Why Bother?
What the @font-face
The state of web typography
CSS @font-face : Personalized fonts
Create your on personal website - PowerPoint Presentation
The State of Web Type
SEO and Analytics for Wordpress
Making drupal beautiful with web fonts
Web Fonts: Why Bother?

Similar to Font Embedding With CSS3 (20)

KEY
Web Typography with sIFR 3 at Drupalcamp Copenhagen
PPT
Implementing @font-face
PDF
The Type We Want (MIX10)
PDF
Mix10 final snook_ds15
PPT
Web font services: March 2011
PPTX
Typography for WordPress
PDF
Drupal Camp LA 2011: Typography modules for Drupal
PDF
Webfonts: Demystified
PDF
New Web Typography
PDF
Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
PDF
new fonts for the web
PDF
The type revolutionary's cookbook
PDF
Why CSS Was Invented (Håkon Wium Lie)
PDF
[heweb11] CSS3 Makeover
KEY
Employing Custom Fonts
PPT
Introduction to FPDF
PDF
Extensis Web Typography Workshop | WebVisions Portland
PDF
[Worskhop Summits] CSS3 Workshop
PPT
Php with my sql
PPTX
Introduction to PHP.pptx
Web Typography with sIFR 3 at Drupalcamp Copenhagen
Implementing @font-face
The Type We Want (MIX10)
Mix10 final snook_ds15
Web font services: March 2011
Typography for WordPress
Drupal Camp LA 2011: Typography modules for Drupal
Webfonts: Demystified
New Web Typography
Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
new fonts for the web
The type revolutionary's cookbook
Why CSS Was Invented (Håkon Wium Lie)
[heweb11] CSS3 Makeover
Employing Custom Fonts
Introduction to FPDF
Extensis Web Typography Workshop | WebVisions Portland
[Worskhop Summits] CSS3 Workshop
Php with my sql
Introduction to PHP.pptx
Ad

Recently uploaded (20)

PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PPTX
Big Data Technologies - Introduction.pptx
PDF
Encapsulation theory and applications.pdf
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PPT
Teaching material agriculture food technology
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PPTX
A Presentation on Artificial Intelligence
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Network Security Unit 5.pdf for BCA BBA.
PPTX
sap open course for s4hana steps from ECC to s4
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Big Data Technologies - Introduction.pptx
Encapsulation theory and applications.pdf
Dropbox Q2 2025 Financial Results & Investor Presentation
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Agricultural_Statistics_at_a_Glance_2022_0.pdf
The Rise and Fall of 3GPP – Time for a Sabbatical?
Teaching material agriculture food technology
Advanced methodologies resolving dimensionality complications for autism neur...
MYSQL Presentation for SQL database connectivity
Reach Out and Touch Someone: Haptics and Empathic Computing
Digital-Transformation-Roadmap-for-Companies.pptx
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
A Presentation on Artificial Intelligence
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Network Security Unit 5.pdf for BCA BBA.
sap open course for s4hana steps from ECC to s4
Spectral efficient network and resource selection model in 5G networks
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Ad

Font Embedding With CSS3