SlideShare a Scribd company logo
TYPOGRAPHY AND
DRUPAL
Ashok Modi – DrupalCampLA 2011
About me
  Computer Systems Analyst at the California Institute
   of the Arts (http://calarts.edu)
  Nice fonts make me smile.
About this presentation
    Some module demonstrations
      The contrib area does make it much easier 
  It is more efficient to do custom work at the theme layer
   (or even in a site module)
     Do that if you feel comfortable.

    Feel free to jump in.
      If   you have something to share, come up!
About this presentation
    Various other methods
         Flash Based Text Replacement, Javascript based will *not* be covered.
    Focus on 4 modules
    Image Based Text Replacement
         Cufon
    Using @font-face
       Google Fonts
       Webfont Loader API
       @font-your-face

    Some places to get nice fonts
    Anything else?
Image Based Text Replacement
  No issues with a flash blocker (like sIFR)
  Don’t have to worry about licensing issues as much.

  Quite a few options

      Cufon    (Most popular though 6.x no longer supported –
       it is, however, still fairly stable)
      TextImage (Second best option)

      FaceLift Image Replacement

      ImageAPI Text Renderer

      Signwriter
Image Based Text Replacement
    Cufon
      Download  Cufon module (http://goo.gl/pxi1z)
      Download external cufon js (http://goo.gl/AqZAq)

      Generate a font definition (http://goo.gl/x0ar)

      Move the js file to sites/all/libraries/cufon-fonts (or
       add to your theme).
      DEMO
Using @font-face
    Quickly become the standard.
      Text remains unchanged.
      Licensing issues…

      Currently need many different font formats.
        eot: IE4+
        otf/ttf: Safari (iOS 4.2+), FF 3.5+, Opera, Chrome
        svg: iOS < 4.1, Opera
        woff: FF 3.6+, Opera, Chrome, IE9+, Safari 5.1+

      Browsers  load the font in different ways (some show
       plain text until font is downloaded, other hide text)
Using @font-face (cont’d)
    Google Font Directory (http://goo.gl/M9f7)
       Enable   and go!
       DEMO

    Webfont Loader (http://goo.gl/ipc3U)
       More  setup work
       Uses javascript to figure out when fonts are loaded
         Slightly   slower but more consistent behavior
       Natively  works with typekit, google fonts, fonts live,
        fontdeck and ‘custom’ sources
       Create font packages which contain this information along
        with the css files to reference.
Using @font-face (cont’d)
  Font-Your-Face (http://goo.gl/27ORm)
  Enable and go (works with a number of providers)

      Native  providers include typekit, kernest, font squirrel,
       google fonts
      6.x has ability to upload custom fonts (still to be ported
       to 7.x)
      Integration between Webfont Loader and Font-Your-
       Face in works.
    DEMO
Places to get nice fonts
    Free, commercial use fonts
       Kernest (http://kernest.com)
       Font Squirrel (http://fontsquirrel.com)
       Google Fonts (http://www.google.com/webfonts)


    Subscription-based
       Typekit  (http://typekit.com)
       Font Spring (http://fontspring.com)
       Font Deck (http://fontdeck.com)
       Fonts Live (http://fontslive.com)


    Any others?
Questions?
    Have something to share?
      Come     on up!
    Interested in helping with some of the typography
     projects?
      Let’s   talk after!
    What other presentations might be related and/or
     useful?
      Drupal    Design Skills 2012

More Related Content

What's hot

Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
Mediacurrent
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
Sencha
 
Speed up Drupal development with Drush
Speed up Drupal development with DrushSpeed up Drupal development with Drush
Speed up Drupal development with Drushkbasarab
 
Speeding Up The Snail
Speeding Up The SnailSpeeding Up The Snail
Speeding Up The Snail
Marcus Deglos
 
Drupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentDrupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven Development
Mediacurrent
 
Here Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPressHere Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPress
Rami Sayar
 
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
Sencha
 
WordPress Theme and Plugin Optimization - WordPress Arvika March '14
WordPress Theme and Plugin Optimization - WordPress Arvika March '14WordPress Theme and Plugin Optimization - WordPress Arvika March '14
WordPress Theme and Plugin Optimization - WordPress Arvika March '14
slobodanmanic
 
Drupal Overview For Techies
Drupal Overview For TechiesDrupal Overview For Techies
Drupal Overview For Techies
Robert Carr
 
Drupal feature proposal: two new stream-wrappers
Drupal feature proposal: two new stream-wrappersDrupal feature proposal: two new stream-wrappers
Drupal feature proposal: two new stream-wrappers
Marcus Deglos
 
Front End Website Optimization
Front End Website OptimizationFront End Website Optimization
Front End Website Optimization
Gerard Sychay
 
Pure Speed Drupal 4 Gov talk
Pure Speed Drupal 4 Gov talkPure Speed Drupal 4 Gov talk
Pure Speed Drupal 4 Gov talk
Bryan Ollendyke
 
Rapidly prototyping web applications using BackPress
Rapidly prototyping web applications using BackPressRapidly prototyping web applications using BackPress
Rapidly prototyping web applications using BackPress
Nathaniel Taintor
 
WordPress Development Environments
WordPress Development Environments WordPress Development Environments
WordPress Development Environments
Ohad Raz
 
Save Time by Managing WordPress from the Command Line
Save Time by Managing WordPress from the Command LineSave Time by Managing WordPress from the Command Line
Save Time by Managing WordPress from the Command Line
Shawn Hooper
 
Front-End Performance Optimizing
Front-End Performance OptimizingFront-End Performance Optimizing
Front-End Performance Optimizing
Michael Pehl
 
DSpace 4.2 XMLUI Theming
DSpace 4.2 XMLUI ThemingDSpace 4.2 XMLUI Theming
DSpace 4.2 XMLUI ThemingDuraSpace
 
Migrating a Site Quickly with SSH and WP-CLI (It's not as scary as you think!)
Migrating a Site Quickly with SSH and WP-CLI (It's not as scary as you think!)Migrating a Site Quickly with SSH and WP-CLI (It's not as scary as you think!)
Migrating a Site Quickly with SSH and WP-CLI (It's not as scary as you think!)Japheth Thomson
 
A Better WordPress Workflow with WP-CLI
A Better WordPress Workflow with WP-CLIA Better WordPress Workflow with WP-CLI
A Better WordPress Workflow with WP-CLI
Rikesh Ramlochund
 
Roy foubister (hosting high traffic sites on a tight budget)
Roy foubister (hosting high traffic sites on a tight budget)Roy foubister (hosting high traffic sites on a tight budget)
Roy foubister (hosting high traffic sites on a tight budget)WordCamp Cape Town
 

What's hot (20)

Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
 
Speed up Drupal development with Drush
Speed up Drupal development with DrushSpeed up Drupal development with Drush
Speed up Drupal development with Drush
 
Speeding Up The Snail
Speeding Up The SnailSpeeding Up The Snail
Speeding Up The Snail
 
Drupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentDrupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven Development
 
Here Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPressHere Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPress
 
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
 
WordPress Theme and Plugin Optimization - WordPress Arvika March '14
WordPress Theme and Plugin Optimization - WordPress Arvika March '14WordPress Theme and Plugin Optimization - WordPress Arvika March '14
WordPress Theme and Plugin Optimization - WordPress Arvika March '14
 
Drupal Overview For Techies
Drupal Overview For TechiesDrupal Overview For Techies
Drupal Overview For Techies
 
Drupal feature proposal: two new stream-wrappers
Drupal feature proposal: two new stream-wrappersDrupal feature proposal: two new stream-wrappers
Drupal feature proposal: two new stream-wrappers
 
Front End Website Optimization
Front End Website OptimizationFront End Website Optimization
Front End Website Optimization
 
Pure Speed Drupal 4 Gov talk
Pure Speed Drupal 4 Gov talkPure Speed Drupal 4 Gov talk
Pure Speed Drupal 4 Gov talk
 
Rapidly prototyping web applications using BackPress
Rapidly prototyping web applications using BackPressRapidly prototyping web applications using BackPress
Rapidly prototyping web applications using BackPress
 
WordPress Development Environments
WordPress Development Environments WordPress Development Environments
WordPress Development Environments
 
Save Time by Managing WordPress from the Command Line
Save Time by Managing WordPress from the Command LineSave Time by Managing WordPress from the Command Line
Save Time by Managing WordPress from the Command Line
 
Front-End Performance Optimizing
Front-End Performance OptimizingFront-End Performance Optimizing
Front-End Performance Optimizing
 
DSpace 4.2 XMLUI Theming
DSpace 4.2 XMLUI ThemingDSpace 4.2 XMLUI Theming
DSpace 4.2 XMLUI Theming
 
Migrating a Site Quickly with SSH and WP-CLI (It's not as scary as you think!)
Migrating a Site Quickly with SSH and WP-CLI (It's not as scary as you think!)Migrating a Site Quickly with SSH and WP-CLI (It's not as scary as you think!)
Migrating a Site Quickly with SSH and WP-CLI (It's not as scary as you think!)
 
A Better WordPress Workflow with WP-CLI
A Better WordPress Workflow with WP-CLIA Better WordPress Workflow with WP-CLI
A Better WordPress Workflow with WP-CLI
 
Roy foubister (hosting high traffic sites on a tight budget)
Roy foubister (hosting high traffic sites on a tight budget)Roy foubister (hosting high traffic sites on a tight budget)
Roy foubister (hosting high traffic sites on a tight budget)
 

Similar to Drupal Camp LA 2011: Typography modules for Drupal

Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011
RZasadzinski
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
Monotype
 
Typography for WordPress
Typography for WordPressTypography for WordPress
Typography for WordPress
Nile Flores
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
Yves Van Goethem
 
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's AmpersandwichSuccessful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Jenn Lukas
 
Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fonts
Prototype Interactive
 
SmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers AmpersandwichSmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers Ampersandwich
Jenn Lukas
 
new fonts for the web
new fonts for the webnew fonts for the web
new fonts for the web
Marc Tobias Kunisch
 
Building A Platform From Open Source At Yahoo
Building A Platform From Open Source At YahooBuilding A Platform From Open Source At Yahoo
Building A Platform From Open Source At Yahoo
Dustin Whittle
 
Tool twist newsletter 2010
Tool twist newsletter 2010Tool twist newsletter 2010
Tool twist newsletter 2010
Aravind Naidu
 
Buzzword, How'd They Build That?
Buzzword, How'd They Build That?Buzzword, How'd They Build That?
Buzzword, How'd They Build That?
dcoletta
 
CalArts presentation
CalArts presentationCalArts presentation
CalArts presentation
Ashok Modi
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive Summary
Gilad Khen
 
Building Buzzword (Flex Camp Boston 2007)
Building Buzzword (Flex Camp Boston 2007)Building Buzzword (Flex Camp Boston 2007)
Building Buzzword (Flex Camp Boston 2007)dcoletta
 
Web Font Replacement
Web Font ReplacementWeb Font Replacement
Web Font Replacementbrinsknaps
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work Everywhere
Doris Chen
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
Nathan Smith
 
The State of Web Type
The State of Web TypeThe State of Web Type
The State of Web Type
Matthew Buchanan
 
Ie9 overview
Ie9 overviewIe9 overview
Ie9 overview
裕波 周
 

Similar to Drupal Camp LA 2011: Typography modules for Drupal (20)

Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011
 
Web fonts
Web fontsWeb fonts
Web fonts
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
 
Typography for WordPress
Typography for WordPressTypography for WordPress
Typography for WordPress
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
 
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's AmpersandwichSuccessful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
 
Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fonts
 
SmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers AmpersandwichSmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers Ampersandwich
 
new fonts for the web
new fonts for the webnew fonts for the web
new fonts for the web
 
Building A Platform From Open Source At Yahoo
Building A Platform From Open Source At YahooBuilding A Platform From Open Source At Yahoo
Building A Platform From Open Source At Yahoo
 
Tool twist newsletter 2010
Tool twist newsletter 2010Tool twist newsletter 2010
Tool twist newsletter 2010
 
Buzzword, How'd They Build That?
Buzzword, How'd They Build That?Buzzword, How'd They Build That?
Buzzword, How'd They Build That?
 
CalArts presentation
CalArts presentationCalArts presentation
CalArts presentation
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive Summary
 
Building Buzzword (Flex Camp Boston 2007)
Building Buzzword (Flex Camp Boston 2007)Building Buzzword (Flex Camp Boston 2007)
Building Buzzword (Flex Camp Boston 2007)
 
Web Font Replacement
Web Font ReplacementWeb Font Replacement
Web Font Replacement
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work Everywhere
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
The State of Web Type
The State of Web TypeThe State of Web Type
The State of Web Type
 
Ie9 overview
Ie9 overviewIe9 overview
Ie9 overview
 

Recently uploaded

Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
g2nightmarescribd
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 

Recently uploaded (20)

Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 

Drupal Camp LA 2011: Typography modules for Drupal

  • 1. TYPOGRAPHY AND DRUPAL Ashok Modi – DrupalCampLA 2011
  • 2. About me   Computer Systems Analyst at the California Institute of the Arts (http://calarts.edu)   Nice fonts make me smile.
  • 3. About this presentation   Some module demonstrations  The contrib area does make it much easier    It is more efficient to do custom work at the theme layer (or even in a site module)  Do that if you feel comfortable.   Feel free to jump in.  If you have something to share, come up!
  • 4. About this presentation   Various other methods   Flash Based Text Replacement, Javascript based will *not* be covered.   Focus on 4 modules   Image Based Text Replacement   Cufon   Using @font-face   Google Fonts   Webfont Loader API   @font-your-face   Some places to get nice fonts   Anything else?
  • 5. Image Based Text Replacement   No issues with a flash blocker (like sIFR)   Don’t have to worry about licensing issues as much.   Quite a few options  Cufon (Most popular though 6.x no longer supported – it is, however, still fairly stable)  TextImage (Second best option)  FaceLift Image Replacement  ImageAPI Text Renderer  Signwriter
  • 6. Image Based Text Replacement   Cufon  Download Cufon module (http://goo.gl/pxi1z)  Download external cufon js (http://goo.gl/AqZAq)  Generate a font definition (http://goo.gl/x0ar)  Move the js file to sites/all/libraries/cufon-fonts (or add to your theme).  DEMO
  • 7. Using @font-face   Quickly become the standard.  Text remains unchanged.  Licensing issues…  Currently need many different font formats.  eot: IE4+  otf/ttf: Safari (iOS 4.2+), FF 3.5+, Opera, Chrome  svg: iOS < 4.1, Opera  woff: FF 3.6+, Opera, Chrome, IE9+, Safari 5.1+  Browsers load the font in different ways (some show plain text until font is downloaded, other hide text)
  • 8. Using @font-face (cont’d)   Google Font Directory (http://goo.gl/M9f7)   Enable and go!   DEMO   Webfont Loader (http://goo.gl/ipc3U)   More setup work   Uses javascript to figure out when fonts are loaded   Slightly slower but more consistent behavior   Natively works with typekit, google fonts, fonts live, fontdeck and ‘custom’ sources   Create font packages which contain this information along with the css files to reference.
  • 9. Using @font-face (cont’d)   Font-Your-Face (http://goo.gl/27ORm)   Enable and go (works with a number of providers)  Native providers include typekit, kernest, font squirrel, google fonts  6.x has ability to upload custom fonts (still to be ported to 7.x)  Integration between Webfont Loader and Font-Your- Face in works.   DEMO
  • 10. Places to get nice fonts   Free, commercial use fonts   Kernest (http://kernest.com)   Font Squirrel (http://fontsquirrel.com)   Google Fonts (http://www.google.com/webfonts)   Subscription-based   Typekit (http://typekit.com)   Font Spring (http://fontspring.com)   Font Deck (http://fontdeck.com)   Fonts Live (http://fontslive.com)   Any others?
  • 11. Questions?   Have something to share?  Come on up!   Interested in helping with some of the typography projects?  Let’s talk after!   What other presentations might be related and/or useful?  Drupal Design Skills 2012