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.
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.
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>✉
<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
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
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/
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');
}
Notas do Editor
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