Blog

Home/Web/Tech/Web Tutorials/Use Custom WebFonts/Pictograms in 5 Steps

Use Custom WebFonts/Pictograms in 5 Steps

Here are some instructions for using the web-font.

This tutorial specifically uses Entypo Pictograms created by Daniel Bruce. You can download the files at www.entypo.com.

Step 1: Download the font-files (there should be .eot, tff, .svg, and .woff) and put them in a location where you can reference them.
Step 2: In your CSS stylesheet, declare the font.

@font-face
{
font-family: Entypo;
src: url('http://www.open-logix.com/wp-content/themes/openlogix/fonts/webfonts/entypo.eot'),
url('http://www.open-logix.com/new/wp-content/themes/openlogix/fonts/webfonts/entypo.woff')
url('http://www.open-logix.com/wp-content/themes/openlogix/fonts/webfonts/entypo.ttf'),
url('http://www.open-logix.com/wp-content/themes/openlogix/fonts/webfonts/entypo.svg');
}

Different font formats work better with certain browsers. Try to cover most of them with the  font formats.
Step 3: Create a custom CSS or define inline. It is obviously better to use a separate CSS call.

.entText

{
font-family: Entypo;
font-size: 50px;
color: black;
}

Step 4: Test It

Pencil (unicode)

The uses will vary on whether the browsers are supporting and if the viewer has the font installed.

A B C D E F G H I

g h i j k l m n o

Letters will render as the pictograms if the font is installed on the user machine, but not through referencing the @font-face only. You can add functionality as you would anything else. Click the refresh pictogram to refresh the page.

w/in <p> w/in <h2> w/in <span>

Print

Print


Print

Refresh

Refresh


Refresh

Note that within some elements, not all unicode characters may render correctly in certain browsers. The characters in the chart only work in the paragraph and span, not the h2.

Chome didn’t render either of the two <h2> characters. IE and Safari only rendered the Refresh <h2>. On Firefox, it rendered the Refresh fine, but the print <h2> pictogram showed up as something else. However, all the <p> and <span> characters rendered the same in all 4 browsers.

It is a good idea to stay consistent within <p> or <span> text and test within multiple browsers. If you are using a mobile browser for these maps, it is more crucial to test on a few phones to ensure best coverage. Any mobile web apps could have render issues and make the application look broken or sloppy.

Step 5: Enjoy. Hopefully that clears some things up. Enjoy using your new font/Character map.

If you have questions or would like a tutorial request, let me know at HarryH@open-logix.com

Written by

Harry Ho is a mobile enterprise solutions developer focused on enabling companies mobility covering a spectrum of mobile development, consulting, and strategic planning and implementation.

Leave a Comment


*