web fonts vs image replacement n.
Skip this Video
Download Presentation

Loading in 2 Seconds...

play fullscreen
1 / 19

WEB FONTS Vs. Image REPLACEMENT - PowerPoint PPT Presentation

  • Uploaded on

WEB FONTS Vs. Image REPLACEMENT. ART340. Image Replacement. Putting Text in Images. Using an image to display text is not accessible, nor search engine friendly. Why? Visitors who cannot see your images will not be able to read the text. This includes search engine spiders.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'WEB FONTS Vs. Image REPLACEMENT' - ember

Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
putting text in images
Putting Text in Images
  • Using an image to display text is not accessible, nor search engine friendly.
  • Why? Visitors who cannot see your images will not be able to read the text. This includes search engine spiders.
  • So…what are your options if you want your text in an image?
    • Be inaccessible (not really an option).
    • The Fahrner Image Replacement Method
    • The Phark Method
    • The Shea Method
the fahrner image replacement method
The Fahrner Image Replacement Method

<h3 id=“header"><span>Sample Headline</span></h3>

#header{  width: 300px;  height: 50px;  background: #fffurl(header.gif) top left no-repeat;}

#header span{  display: none;}

fantastic what s the problem
Fantastic! What’s the problem?
  • This method can cause some screen readers to skip over the heading entirely, as they will not read any text that has a display property of none.
the phark method
The Phark Method

#header{  width: 300px;  height: 50px;text-indent: -5000px;}

don t tell me this one has a problem too
Don’t tell me this one has a problem, too?
  • In browsers where CSS is on, but images are off, nothing displays.
  • Really though…how often does this happen?
the shea method
The Shea Method

<h3 id="header"><span></span>Original Content</h3>

#header {  width: 329px;  height: 25px;  position: relative; }

#header span {  background: url(header.gif) no-repeat;  position: absolute;  width: 100%;  height: 100%; }

By absolutely positioning an empty <span> over the text element, the text is effectively hidden. If the image fails to load, the text behind it is still displayed. For this reason, images with transparency cannot be used with the Shea method.

Text (hides behind image)

Bg Image (on empty span)

embedding fonts
Embedding Fonts?
  • In a perfect world, we could embed the font into a website.
  • Technically, you can:

@font-face {

font-family: “League Gothic”;

src: url(“/type/league_gothic.otf”)


  • Issues regarding this have included:
    • Resistance from type foundries.
    • An inconsistency in supported font formats.
resistance from foundries
Resistance from Foundries
  • Foundries make their money through licensing the use of their fonts.
  • Therefore, they want to deter people from downloading, copying, and using them for free.
raw font formats
“Raw Font” Formats
  • OpenType [.otf]
    • The current and newest standard.
    • Screen and print version in single file.
    • Mac/PC compatible.
  • TrueType [.ttf]
    • Screen and print version in single file.
    • Majority of fonts that come automatically installed.
  • PostScript Font (Type 1) [.ps]
    • 2 parts (screen & print) – Must deliver both to printer.
    • Not cross-platform compatible.
    • Allows for high-quality, high-res. printing.
    • While it used to be the professional’s choice, it has been widely replaced.
what is a web font
What is a Web Font?
  • A web font is a specific format with a license that permits its use online.
  • Allows text to be dynamic, searchable and accessible.
web font formats
Web Font Formats
  • WOFF (Web Open Font Format) fontsare compressed versions of .ttf/.otf. The emerging standard. (Firefox 3.6+, IE 9+, Chrome 5.)
  • Embedded OpenType [.eot] Developed by Microsoft. IE Only.(IE 4+)
  • TrueType Fonts[.ttf] Works in most browsers expect IE and iPhone (Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome
  • SVG (Scalable Vector Graphic) fonts for iPad and iPhone.
  • Cufón fontsuses JavaScript to render fonts.
issues with file format
Issues with File Format
  • Some browsers support .otf and .ttf.
  • iOS devices (iPad and iPhone) require SVG.
  • IE only uses Microsoft’s proprietary EOT format:http://en.wikipedia.org/wiki/Embedded_OpenType
  • In addition, there is an new open source format (WOFF) that’s supported by newer browsers.
times they are a changing
Times, they are a changing…
  • Why not just upload a “.ttf,” and link to it with the @font-face declaration.
    • Doing so would most likely violate your End User Licensing Agreement (EULA) with the font’s foundry.
    • To host fonts:
      • They have to be licensed for web embedding.
      • You’ll need several different font formats.
      • You’ll need the latest code for embedding all those formats.
font squirrel
Font Squirrel
  • Free fonts for web use.
  • Font Squirrel provides for you a “Web Kit” that includes:
    • TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome
    • EOT fonts for Internet Explorer 4+
    • WOFF (Web Open Font Format) fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+ [compressed version of .ttf or .otf]
    • SVG fonts for iPad and iPhone
    • Demo.html andstylesheet.css so you can get going fast
font hosting services
Font-Hosting Services
  • Typekit: http://typekit.com
    • Subscription-based pricing.
  • Fontdeck: http://fontdeck.com
    • Subscription-based pricing.
  • WebINK: http://www.extensis.com/en/WebINK/
    • Subscription-based pricing.
  • Google WebFonts: http://code.google.com/webfonts
    • Completely free through Creative Commons license!

Other sites: http://webfonts.info/fonts-available-font-face-embedding

more every week
More every week…
  • Because @font-face is so new, time will tell which sites will be here to stay.
  • Regardless, web fonts are the wave of the future.
  • For more information, visit: http://webfonts.info