Tutorial: Use Entypo Pictogram Suite As @font-face In Your Web Designs

Web fonts are pretty popular at the moment and for a good reason. You see with the @font-face rule, web designers do no longer have to use one of the “web-safe” fonts and this opens up for using all kinds of cool fonts in designs. In particular, we see icons and pictograms now made availble as fonts and because fonts scale well just like vector graphics this is a really cool technique. Just changing the font size and the icons adjust, as you need them to without losing any image quality.

The techEntypo Pictogram Suite is a 250+ set of well-crafted icons designed to suit your every web design need. Now on Current 2.0 release, it boasts of improved old pictograms plus 150+ new icons as well as a Social Extension. It also has Character map for your complete reference along with a Glyph guide available as .rtf or Rich Text Format file and improved hinting for selecting the next icon you want to use.

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]

Icons are a staple in a web developer’s toolkit simply because icons add a certain look and feel to your website’s overall appeal. Entypo exactly does that and more. Designed by Daniel Bruce and Andreas Blombäck , this set is a free download in icon font: OpenType, TrueType and @font-face formats. It also includes image formats in EPS, PDF and PSD. It also under Creative Commons license (CC by-SA 3.0) which means you’re free to share and remix it all you want for your work. Atribution is required so an attribution format is available on the site.

You may be wondering how to use the Entypo as a web font on a web page. It is actually simpler than most people think. In the download package you will find a folder called @font-face. This folder contains all you need for the two fonts: Entypo @font-face and Entypo Social @font-face. At the end of the page your will find a demo I created and made available as download. This will help you try out the technique locally and learn how to do this yourself.

You need to upload these files to your server and add a bit of CSS to make the fonts available. Create a CSS file called entypo.css and add the following code. Save this CSS file in the same folder as the uploaded @font-face files.

@font-face {

font-family: ‘entypo’;

src: url(‘entypo.eot’);

src: url(‘entypo.eot?#iefix’) format(’embedded-opentype’),

url(‘entypo.woff’) format(‘woff’),

url(‘entypo.ttf’) format(‘truetype’),

url(‘entypo.svg#entypo’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: ‘entypo-social’;

src: url(‘entypo-social.eot’);

src: url(‘entypo-social.eot?#iefix’) format(’embedded-opentype’),

url(‘entypo-social.woff’) format(‘woff’),

url(‘entypo-social.ttf’) format(‘truetype’),

url(‘entypo-social.svg#entypo-social’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

In addition, you need to add font-family: “entypo”; in the CSS selector where you will use the special characters. In the demo I used a list structure.

section#characters ul {
list-style: none;
}

section#characters li {
float: left;
font-family: “entypo”;
font-size: 4em;
}

Once this CSS is in place and included in your page like this you are ready to use it.

<link rel=”stylesheet” href=”/font-face/entypo.css”>

In order to find the unicode or HTML special character you need to open the document Glyph guide.rtf.

Here you will find lists off all the entypo characters and the corresponding values to use inserted into your HTML. Here is an example of two ´characters inserted into HTML in a list structure. This is also the way it is done in the demo you can download below.

<li title=”phone”>&#128222;</li>
<li title=”mobile”>&#128241;</li>

This is it – you are ready to add Entypo to your web projects. Let me know in a comment what you think about this resource and if you know about any similar web developer goodies I should review.

You can get Entypo here and download the demo here.

Lars

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.