Using webfont-based
glyphs in your Joomla!™
website
Tips and resources available for creating glyphs on your
website
Using webfont-based glyphs in your Joomla!™
website
What are glyphs and where
did they come from
Font-based glyphs in HTML...
What are glyphs
The Macquarie Dictionary
defines glyph
 Archaeology—a pictograph
or hieroglyph
Wikipedia defines glyph
 ...
Glyphs and icons
Glyphs are like icons
 Most icons used on websites
are based on images
 Most glyphs used on websites
ar...
JPEGs, GIFs, PNGs
Different image
formats
 JPEG – full colour but
no transparency
 GIF – transparent, 256
colours + tran...
Browser support for different image formats
Once upon a time …
… you could use the <FONT FACE="... "> HTML
tag
 HTML5 changed all that
 Before HTML4, the web browse...
Unicode character set
The Unicode Standard covers (almost) all the
characters, punctuations, and symbols in the
world.
Uni...
Glyphs created with “safe” fonts
For example, you could display the “envelope”
character (U2709) like this
<style>
p.envel...
Glyphs created with HTML entities
Another way of displaying the “envelope” character
(U2709) is this
<p>✉
<a href="mailto:...
A complete list of CSS safe fonts
Sans-serif
 Arial, Arial Black, Arial Narrow, Arial Rounded MT Bold, Avant Garde, Calib...
Examples of different uses of font-
family
“Safe” font-based glyphs issues
Your users may not have all fonts referenced on
your site.
Limitations of the CSS font-fam...
How to employ webfonts
With the @font-face
CSS rule, web
designers no longer
have to use the “safe”
fonts.
Syntax
 @font-...
Browser support for webfonts
Examples of webfonts used as
glyphs
Character-based
glyphs require the use
of downloadable
webfonts
Examples of
webfonts/f...
Sample characters in Glyphicons
Halflings
What you need for webfonts
The webfont source files
The CSS rule to load the fonts
A bit of imagination and creativity ......
Copy the font files to your
website
Copy the webfont file(s) to your site
 Remember the /path
 You may have to copy diff...
CSS rule to create the Glyphicons
Halflings font
Add the following rule to your Joomla site template
CSS file (or to a cus...
Upcoming SlideShare
Loading in...5
×

Using webfont-based glyphs in your Joomla website

517

Published on

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

Published in: Internet, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
517
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • The dictionary definition of a glyph is “a pictograph or hieroglyph” …
    [C] … however, as you can see, a glyph has a slightly different meaning when related to typography
  • Glyphs are like icons …

    [C] The use of images as icons originated with the implementation of the <IMG> HTML tag
    [C] The use of glyphs, on the other hand, started off with the use of the <FONT> 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.
    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.
    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.

  • 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.
    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.
    You are restricted when you use only the so-called “safe” fonts.
    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.

  • Not all browsers support all webfont formats
    Not all browsers support @font-face
  • Here we see some of the characters available in Glyphicons Halflings
  • Using webfont-based glyphs in your Joomla website

    1. 1. Using webfont-based glyphs in your Joomla!™ website Tips and resources available for creating glyphs on your website
    2. 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. 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. 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. 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. 6. Browser support for different image formats
    7. 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. 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. 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. 10. Glyphs created with HTML entities Another way of displaying the “envelope” character (U2709) is this <p>✉ <a href="mailto:testing@test.com">Email me</a> </p> Not all characters are available in all the so-called “safe” fonts
    11. 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. 12. Examples of different uses of font- family
    13. 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. 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. 15. Browser support for webfonts
    16. 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. 17. Sample characters in Glyphicons Halflings
    18. 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. 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. 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'); }
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×