Using webfont-based glyphs in your Joomla!™ websiteTips 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 “safe” fonts The magic of CSS3 and

webfont-based glyphs A practical demonstration

Ancient Maya glyph for Day 10 of the tzolkin calendar

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.

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 attributeExample: <FONT FACE="Webdings">i</FONT>

Icon usage (as images) originated via the <IMG SRC="URL" /> HTML tag

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.

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 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?

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 http://www.fileformat.info

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

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

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

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-family rule

fallback. Character set limitations within the so-called

“safe” fonts. What if you want to use “other” fonts?

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

Browser support for webfonts

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/

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 ... and

some patience

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

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