SlideShare a Scribd company logo
1 of 28
Download to read offline
webfonts & @font-face
       in brief
                                      Paul Irish
                       web 2.0 expo : May 6, 2010




Monday, May 10, 2010
@font-face




Monday, May 10, 2010
Browser Support
                        @font-face           svg fonts               rich type
                          (eot or ttf/otf)   (uses @font-face)        libraries
                                                                     (sIFR, Cufon, etc)


                   IE      IE 5+                    ---                 IE 6+

              Firefox     FF 3.5             FF 3.5 +                  FF 2+
                          (.woff in 3.6)


               Safari    Saf 3.1+            Saf 3.1+                      3+
                                             (incl. mobile safari)


             Chrome     Chrome 4.0 Chrome 0.3+                             1+
                             (stable)


              Opera      Opera 10             Opera 9                    9.2+
                                                                        (sometimes)




Monday, May 10, 2010
Browser Support
                        @font-face           svg fonts               rich type
                          (eot or ttf/otf)   (uses @font-face)        libraries
                                                                     (sIFR, Cufon, etc)


                   IE      IE 5+                    ---                 IE 6+

              Firefox     FF 3.5             FF 3.5 +                  FF 2+
                          (.woff in 3.6)


               Safari    Saf 3.1+            Saf 3.1+                      3+
                                             (incl. mobile safari)


             Chrome     Chrome 4.0 Chrome 0.3+                             1+
                             (stable)


              Opera      Opera 10             Opera 9                    9.2+
                                                                        (sometimes)




Monday, May 10, 2010
97% SUPPORT OF @FONT-FACE
                                      IE 6.0
                                       10%                  IE 8.0
                                                             25%




                       IE 7.0
                        17%
                                                                     Firefox 3.0
                                                                         3%




                       Saf3, Opera, Chrome            Firefox 3.5+
                               15%                        27%
                                         Safari 4.0
                                            4%




Monday, May 10, 2010
Monday, May 10, 2010
Monday, May 10, 2010
Monday, May 10, 2010
Monday, May 10, 2010
Monday, May 10, 2010
Monday, May 10, 2010
Monday, May 10, 2010
Monday, May 10, 2010
Monday, May 10, 2010
Acquiring fonts
           Free fonts
               Fontsquirrel, League of Movable Type,
               WebFonts.info wiki
           Commercial fonts
               Typekit, Kernest, FontDeck, Typotheque,
               webfonts.fonts.com, ascenderfonts.com
               Fontspring

Monday, May 10, 2010
Acquiring fonts
           Free fonts
               Fontsquirrel, League of Movable Type,
               WebFonts.info wiki
           Commercial fonts
               Typekit, Kernest, FontDeck, Typotheque,
               webfonts.fonts.com, ascenderfonts.com
               Fontspring

Monday, May 10, 2010
Acquiring fonts
           Free fonts
               Fontsquirrel, League of Movable Type,
               WebFonts.info wiki
           Commercial fonts
               Typekit, Kernest, FontDeck, Typotheque,
               webfonts.fonts.com, ascenderfonts.com
               Fontspring

Monday, May 10, 2010
Acquiring fonts
           Free fonts
               Fontsquirrel, League of Movable Type,
               WebFonts.info wiki
           Commercial fonts
               Typekit, Kernest, FontDeck, Typotheque,
               webfonts.fonts.com, ascenderfonts.com
               Fontspring

Monday, May 10, 2010
Font Squirrel Generator




Monday, May 10, 2010
Font Squirrel Generator




Monday, May 10, 2010
Monday, May 10, 2010
Monday, May 10, 2010
Monday, May 10, 2010
FontSpring




Monday, May 10, 2010
FontSpring




Monday, May 10, 2010
FontSpring




Monday, May 10, 2010
Monday, May 10, 2010
Monday, May 10, 2010

More Related Content

Viewers also liked

Smaller, Flatter, Smarter
Smaller, Flatter, SmarterSmaller, Flatter, Smarter
Smaller, Flatter, Smarter
Web 2.0 Expo
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 

Viewers also liked (20)

Better Bash - Unit and Integration Testing
Better Bash - Unit and Integration TestingBetter Bash - Unit and Integration Testing
Better Bash - Unit and Integration Testing
 
(Short version) Building a Mobile, Social, Location-Based Game in 5 Weeks
(Short version) Building a Mobile, Social, Location-Based Game in 5 Weeks(Short version) Building a Mobile, Social, Location-Based Game in 5 Weeks
(Short version) Building a Mobile, Social, Location-Based Game in 5 Weeks
 
Smaller, Flatter, Smarter
Smaller, Flatter, SmarterSmaller, Flatter, Smarter
Smaller, Flatter, Smarter
 
Social Gold: The Design of FarmVille and Other Social Games (Web2Expo 2010)
Social Gold: The Design of FarmVille and Other Social Games (Web2Expo 2010)Social Gold: The Design of FarmVille and Other Social Games (Web2Expo 2010)
Social Gold: The Design of FarmVille and Other Social Games (Web2Expo 2010)
 
Mobilising the world's Natural History - Open Data + Citizen Science
Mobilising the world's Natural History - Open Data + Citizen ScienceMobilising the world's Natural History - Open Data + Citizen Science
Mobilising the world's Natural History - Open Data + Citizen Science
 
Kobo: What Do eBook Customers Really, Really Want? (Tools of Change 2011)
Kobo: What Do eBook Customers Really, Really Want? (Tools of Change 2011)Kobo: What Do eBook Customers Really, Really Want? (Tools of Change 2011)
Kobo: What Do eBook Customers Really, Really Want? (Tools of Change 2011)
 
Data Science and Smart Systems: Creating the Digital Brain
Data Science and Smart Systems: Creating the Digital Brain Data Science and Smart Systems: Creating the Digital Brain
Data Science and Smart Systems: Creating the Digital Brain
 
Web 2.0 Expo Speech: Open Leadership
Web 2.0 Expo Speech: Open LeadershipWeb 2.0 Expo Speech: Open Leadership
Web 2.0 Expo Speech: Open Leadership
 
Hadoop's Impact on the Future of Data Management | Amr Awadallah
Hadoop's Impact on the Future of Data Management | Amr AwadallahHadoop's Impact on the Future of Data Management | Amr Awadallah
Hadoop's Impact on the Future of Data Management | Amr Awadallah
 
Locked Out in London (and tweeting about it) - version with my notes
Locked Out in London (and tweeting about it) - version with my notesLocked Out in London (and tweeting about it) - version with my notes
Locked Out in London (and tweeting about it) - version with my notes
 
Did Social Media Hijack My Communications Strategy
Did Social Media Hijack My Communications StrategyDid Social Media Hijack My Communications Strategy
Did Social Media Hijack My Communications Strategy
 
Tyranny of the SLA
Tyranny of the SLATyranny of the SLA
Tyranny of the SLA
 
Primum non nocere - Ethical Obligations in Internet Operations
Primum non nocere - Ethical Obligations in Internet OperationsPrimum non nocere - Ethical Obligations in Internet Operations
Primum non nocere - Ethical Obligations in Internet Operations
 
Kobo: What Do eBook Customers Really, Really Want? (Michael Tamblyn at Tools ...
Kobo: What Do eBook Customers Really, Really Want? (Michael Tamblyn at Tools ...Kobo: What Do eBook Customers Really, Really Want? (Michael Tamblyn at Tools ...
Kobo: What Do eBook Customers Really, Really Want? (Michael Tamblyn at Tools ...
 
The Laws of User Experience: Making it or Breaking It with the UX Factor
The Laws of User Experience: Making it or Breaking It with the UX FactorThe Laws of User Experience: Making it or Breaking It with the UX Factor
The Laws of User Experience: Making it or Breaking It with the UX Factor
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Securing Application Deployments in CI/CD Environments (Updated slides: http:...
Securing Application Deployments in CI/CD Environments (Updated slides: http:...Securing Application Deployments in CI/CD Environments (Updated slides: http:...
Securing Application Deployments in CI/CD Environments (Updated slides: http:...
 
Forking Successfully - or is a branch better?
Forking Successfully - or is a branch better?Forking Successfully - or is a branch better?
Forking Successfully - or is a branch better?
 
Advanced Caching Concepts @ Velocity NY 2015
Advanced Caching Concepts @ Velocity NY 2015Advanced Caching Concepts @ Velocity NY 2015
Advanced Caching Concepts @ Velocity NY 2015
 
Managing a large open source community - OSCON 2016
Managing a large open source community - OSCON 2016Managing a large open source community - OSCON 2016
Managing a large open source community - OSCON 2016
 

Similar to webfonts & @font-face :: in brief

Standards: politics, case studies
Standards: politics, case studiesStandards: politics, case studies
Standards: politics, case studies
Zi Bin Cheah
 
Web Font Replacement
Web Font ReplacementWeb Font Replacement
Web Font Replacement
brinsknaps
 
Squeezing The Best Out Of Webfonts
Squeezing The Best Out Of WebfontsSqueezing The Best Out Of Webfonts
Squeezing The Best Out Of Webfonts
Paul Irish
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fonts
Four Kitchens
 

Similar to webfonts & @font-face :: in brief (20)

The state of web typography
The state of web typographyThe state of web typography
The state of web typography
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
 
The Type We Want
The Type We WantThe Type We Want
The Type We Want
 
new fonts for the web
new fonts for the webnew fonts for the web
new fonts for the web
 
Standards: politics, case studies
Standards: politics, case studiesStandards: politics, case studies
Standards: politics, case studies
 
Web Font Replacement
Web Font ReplacementWeb Font Replacement
Web Font Replacement
 
Squeezing The Best Out Of Webfonts
Squeezing The Best Out Of WebfontsSqueezing The Best Out Of Webfonts
Squeezing The Best Out Of Webfonts
 
Web Typography with CSS3
Web Typography with CSS3Web Typography with CSS3
Web Typography with CSS3
 
WOFF and emerging technology of web fonts
WOFF and emerging technology of web fontsWOFF and emerging technology of web fonts
WOFF and emerging technology of web fonts
 
The State of Web Type
The State of Web TypeThe State of Web Type
The State of Web Type
 
Web fonts
Web fontsWeb fonts
Web fonts
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
 
Drupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalDrupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for Drupal
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?
 
Firefox 4 & THE AFTER
Firefox 4 & THE AFTERFirefox 4 & THE AFTER
Firefox 4 & THE AFTER
 
Firefox 4 and more
Firefox 4 and moreFirefox 4 and more
Firefox 4 and more
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fonts
 
State of the Mobile Browsers
State of the Mobile BrowsersState of the Mobile Browsers
State of the Mobile Browsers
 
Firefox 3.5 Overview
Firefox 3.5 OverviewFirefox 3.5 Overview
Firefox 3.5 Overview
 

More from Paul Irish (8)

An Overview of HTML5 Storage
An Overview of HTML5 StorageAn Overview of HTML5 Storage
An Overview of HTML5 Storage
 
Progressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementProgressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancement
 
Progressive Advancement in Web8
Progressive Advancement in Web8Progressive Advancement in Web8
Progressive Advancement in Web8
 
Modernizr - Detecting HTML5 and CSS3 support
Modernizr - Detecting HTML5 and CSS3 supportModernizr - Detecting HTML5 and CSS3 support
Modernizr - Detecting HTML5 and CSS3 support
 
Employing Custom Fonts
Employing Custom FontsEmploying Custom Fonts
Employing Custom Fonts
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & Compression
 
Practical Design Solutions from Japan
Practical Design Solutions from JapanPractical Design Solutions from Japan
Practical Design Solutions from Japan
 
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
 

Recently uploaded

Recently uploaded (20)

A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 

webfonts & @font-face :: in brief