Using webfont-based glyphs in your Joomla!TM website discusses using glyphs created from webfonts rather than images. Glyphs are elemental symbols that can represent readable characters. Traditionally glyphs were created using fonts installed on users' computers, but HTML5 relies on "safe" fonts and CSS. The document demonstrates how to employ webfonts using the @font-face CSS rule to access a wider range of glyphs beyond safe fonts, and provides examples using the Glyphicons Halflings font.

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');
}