Using webfont-based glyphs in your Joomla website
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Using webfont-based glyphs in your Joomla website

on

  • 187 views

What are glyphs and who uses them

What are glyphs and who uses them
What are webfonts
The differences between icons and glyphs
Implementing webfonts

Statistics

Views

Total Views
187
Views on SlideShare
182
Embed Views
5

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 5

http://www.canbjug.enduring.com.au 2
http://www.slideee.com 2
http://www.canbjug.org.au 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • The dictionary definition of a glyph is “a pictograph or hieroglyph” … <br /> [C] … however, as you can see, a glyph has a slightly different meaning when related to typography <br />
  • Glyphs are like icons … <br /> <br /> [C] The use of images as icons originated with the implementation of the HTML tag <br /> [C] The use of glyphs, on the other hand, started off with the use of the HTML tag
  • Not all browsers support all image formats
  • To display an HTML page correctly, the browser must know what character set (character encoding) to use. <br /> For HTML5, the default character encoding is UTF-8. This has not always been the case. The character encoding for the early web was ASCII. <br /> Later, from HTML 2.0 to HTML 4.01, ISO-8859-1 was considered the standard. With XML and HTML5, UTF-8 finally arrived, and solved a lot of character encoding problems. <br /> <br />
  • Here’s another way of achieving the same result that we saw on the previous slide
  • But, no matter how you look at it, an “envelope” (Unicode character 2709) still looks the same.
  • Your users may not necessarily have all fonts referenced on your site. <br /> The CSS font-family rule offers a fallback capability if your users do not have the same fonts that you used when you designed your site, but their experience may be different and may suffer because of it. <br /> You are restricted when you use only the so-called “safe” fonts. <br /> If you want to use other fonts—instead of “safe” font ones—you are going to need something else. That’s where downloadable webfonts come into play. <br /> <br />
  • Not all browsers support all webfont formats <br /> Not all browsers support @font-face <br />
  • Here we see some of the characters available in Glyphicons Halflings <br />

Using webfont-based glyphs in your Joomla website Presentation Transcript

  • 1. Using webfont-based glyphs in your Joomla!™ website Tips and resources available for creating glyphs on your website
  • 2. Using webfont-based glyphs in your Joomla!™ website What are glyphs and where did they come from Font-based glyphs in HTML What are “safe” fonts The magic of CSS3 and webfont-based glyphs A practical demonstration Ancient Maya glyph for Day 10 of the tzolkin calendar
  • 3. What are glyphs The Macquarie Dictionary defines glyph  Archaeology—a pictograph or hieroglyph Wikipedia defines glyph  Typography—an elemental symbol within an agreed set of symbols, intended to represent a readable character for the purposes of writing and thereby expressing thoughts, ideas and concepts.
  • 4. Glyphs and icons Glyphs are like icons  Most icons used on websites are based on images  Most glyphs used on websites are created using fonts Glyph usage originated via the <FONT FACE="... "> HTML attribute Example: <FONT FACE="Webdings">i</FONT> Icon usage (as images) originated via the <IMG SRC="URL" /> HTML tag
  • 5. JPEGs, GIFs, PNGs Different image formats  JPEG – full colour but no transparency  GIF – transparent, 256 colours + transparency  PNG – full colour + transparency  Depending on browser support, you can also BMP, SVG and some other formats Problems with using images: ■ Each image has to be stored as a separate file. ■ Images have to be downloaded when the page is loaded. If you have lots of images this adds to the time it takes before the page is rendered. ■ If the image is not available or it takes too long to get the file, the image is replaced by the “red X” placeholder. ■ Antialiasing (particularly noticeable on dark backgrounds) issues. ■ Scaleability versus quality. ■ If you don’t have the images, you have to spend time finding them and make sure that you don’t run into copyright/ownership problems.
  • 6. Browser support for different image formats
  • 7. Once upon a time … … you could use the <FONT FACE="... "> HTML tag  HTML5 changed all that  Before HTML4, the web browser relied on fonts installed on user’s computer  From HTML4, the <FONT> tag was deprecated  HTML5 relies on CSS and “safe” fonts So ... Where have all the “cute” fonts gone? Why can’t I use Webdings, Wingdings or ZapfDingbats?
  • 8. Unicode character set The Unicode Standard covers (almost) all the characters, punctuations, and symbols in the world. Unicode enables processing, storage, and transport of text, independent of platform and language. See also  http://www.w3schools.com/charsets/  http://unicode-table.com/en/#miscellaneous-symbols
  • 9. Glyphs created with “safe” fonts For example, you could display the “envelope” character (U2709) like this <style> p.envelope:before { content: '2709'; } </style> <p class="envelope"> <a href="mailto:testing@test.com">Email me</a> </p> ... and this would probably look like
  • 10. Glyphs created with HTML entities Another way of displaying the “envelope” character (U2709) is this <p>&#x2709; <a href="mailto:testing@test.com">Email me</a> </p> Not all characters are available in all the so-called “safe” fonts
  • 11. A complete list of CSS safe fonts Sans-serif  Arial, Arial Black, Arial Narrow, Arial Rounded MT Bold, Avant Garde, Calibri, Candara, Century Gothic, Franklin Gothic Medium, Futura, Geneva, Gill Sans, Helvetica, Impact, Lucida Grande, Optima, Segoe UI, Tahoma, Trebuchet MS, Verdana Serif  Baskerville, Big Caslon, Bodoni MT, Book Antiqua, Calisto MT, Cambria, Didot, Garamond, Georgia, Goudy Old Style, Hoefler Text, Lucida Bright, Palatino, Perpetua, Rockwell, Rockwell Extra Bold, Times New Roman Monospaced  Andale Mono, Consolas, Courier New, Lucida Console, Lucida Sans Typewriter, Monaco Fantasy  Copperplate Script  Brush Script MT
  • 12. Examples of different uses of font- family
  • 13. “Safe” font-based glyphs issues Your users may not have all fonts referenced on your site. Limitations of the CSS font-family rule fallback. Character set limitations within the so-called “safe” fonts. What if you want to use “other” fonts?
  • 14. How to employ webfonts With the @font-face CSS rule, web designers no longer have to use the “safe” fonts. Syntax  @font-face { font-properties } It is a good idea to look at webfont developers’ websites for examples of how they recommend using the @font-face CSS rule
  • 15. Browser support for webfonts
  • 16. Examples of webfonts used as glyphs Character-based glyphs require the use of downloadable webfonts Examples of webfonts/font-families used as glyphs:  IcoMoon, FontAwesome, Glyphicons Halflings IcoMoon is used by Joomla (in the Hathor adminstrator template) and available from http://icomoon.io/ FontAwesome is available from http://fortawesome.github.io/Font- Awesome/ Glyphicons Halflings is available from http://glyphicons.com/
  • 17. Sample characters in Glyphicons Halflings
  • 18. What you need for webfonts The webfont source files The CSS rule to load the fonts A bit of imagination and creativity ... and some patience
  • 19. Copy the font files to your website Copy the webfont file(s) to your site  Remember the /path  You may have to copy different formats of the font, e.g.  WOFF  TTF  EOT  SVG
  • 20. CSS rule to create the Glyphicons Halflings font Add the following rule to your Joomla site template CSS file (or to a custom CSS file, if you have one): @font-face { font-family: 'Glyphicons Halflings'; src: url(‘path/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('path/glyphicons-halflings-regular.woff') format('woff'), url('path/glyphicons-halflings-regular.ttf') format('truetype'), url('path/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); }