Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding Data URI for icon fonts

From: Deploying Icon Fonts for the Web

Video: Adding Data URI for icon fonts

In addition to the basic at font face syntax you'll want to consider adding And I want to encode it to a base 64 string, I wanted to output it in It will take it a second, and when it's finished if I scroll Let's make life easier on ourselves and use copying and paste.

Adding Data URI for icon fonts

In addition to the basic at font face syntax you'll want to consider adding a base 64 encoded version of your icon font in your declarations as well. The data URI specification allows us to take small files like images, and fonts, and then base 64 encode them into a string of characters which we can then. Place inline in our styles. This will help cross domain issues with web fonts support, as well as providing us with a fallback if our fonts aren't available.

Luckily most of the services out there that provide us with web fonts Also provide you with an option of including base sixty-four encoding. But, in the case that's your using a custom icon font that doesn't have it. Or maybe you're creating one yourself. I wanted to run you through the process of adding it, to your own at font face declarations. Now to do that I'm going to use the base sixty-four html file. Found in the 02_02 directory and This is it right now in the browser. So currently at the bottom of the page there, you're going to see the home icon being displayed.

Now in this exercise, I'm using a version of the icon font that we will be using throughout the course, that's mapped to basic Latin characters. So the symbols themselves are basically replacing letters, a, b, c, d, so forth. This one as a matter of fact is replacing h for you guessed it, home. So right now it's being displayed through the use of a class. And let me take you into the code and show you that. So, I have a class called icon. It's defining the font-family as chunky_latin. And down towards the bottom, you can see, I have a span surrounding that h with a class of icon. Now in my Styles, if I scroll down all through my font-face declarations, I can see that I have one for chunky_latin.

And then I'm just pointing to it. So this is the normal, everyday at font face declarations syntax that we talked about in the last exercise. So now we want to add some base 64 encoding to that. So how do you do that if the font you grabbed doesn't already automatically have that option? Well there are a lot of online services, so let me go back up to my browser for a moment. And I've got a little link here to a website called Mobilefish. This is one of my favorite online data 64 encoders. Mobilefish.com has a nice little service.

There are a lot of them online, and some of them, I've found, do a great job with images. But this is one of the ones that I've found that does a great job with both images and fonts, so I really like using this one. Although if you do a quick search for Base64 encoders online, you're going to find a ton of them. So I'm going to scroll down to this little form down here. Here we go. And I can either paste in a binary source data here or I can choose a file. Of course, we're going to choose a file. So I'm going to say, Choose file and I'm going to go out and I'm going to, navigate to my Exercise Files folder, chapter two. zero two oh two, and I'm going to go into the fonts.

Now the one I'm looking for is this one chunky latin regular dot w o f f or woff. This a font format that I think was originally developed by Google, it's open source and there a lot of browsers that support it out there. So I'm going to go ahead and choose this one and click open. And I want to encode it to a base 64 string, I wanted to output it in a text box, which is a little bit below this, we can't see it right now. For maximum characters per line, I'm going to go to zero, basically what that allows you to do, it won't put any line breaks in there, I don't think they're harmful, but I'd rather not find out. And then finally I'm going to say e19 here to prove that I am not a robot.

And I'm going to go ahead and convert this. It will take it a second, and when it's finished if I scroll down I will see a very long string of characters in this text box. And there's no way in the world I can see all of this at once. So I'm just going to do a select all and then I'm going to copy it. So Cmd + C, Ctrl + C. You've done that forever and a day. Right? So, I'm going to go ahead and copy this. And then I'm going to go back into my code editor, and open up the base.css file that's in the _css directory, of the 02_ 02 folder. For those of you that don't have online access or couldn't get the converter to work or are having trouble with it, I've supplied you with a little something.

If you look in the _assets folder, in the 02_02. You'll find the same basic 64 encoding just in a raw text file and you can copy and paste from there if you would like. Okay, so using the base 64 the first thing I want to do, is I want to test to see if it's working without loading up any of the other fonts because, when you're testing base 64 and coding if you link out to any other font it's possible that that's what you're looking at and not your actual base 64 encoded font. Alright, so what I'm going to do now, is, in this source area here, what I'm going to do is I'm going to place my cursor right behind this last comma.

Now, I'm want to point out a couple of things here before I paste all this information in. Because, it gets a little messy after that. This is required, in the source URL, inside these parentheses, what you have to do is you have to use data urs specification, which basically says, okay, you have to identify what the data is, and in this case. It's application/x-font-woff, -woff, woff. Character set encoding was utf-8. That's the standard that we use to encode the characters for this. And we're using base64 to encode it, and that tells the browser how to decode it.

It's necessary in this order, and if you want to know more about that, there are a lot of websites out there that tell you how to form this data. So I'm going to place my cursor right there in that print season, I'm going to paste it and, wow, that's a lot. You can see that's the entire font right there in base 64 and courting. Very interesting. Alright, so now you'll notice that for this declaration, I've changed the name of the font to chunky latin 64, so if I save this, and I go back into the HTML file Right now it'd still be using the old declaration, so I'm going to go up to my font name and I'm going to change that to chunky latin64.

So now if I save this and preview it, the only way this home icon can display is if it's using the Base64 encoding. So now we know that that was successful. We know that it's a viable fallback option for us. And we know that it will help us With cross domain issues. So the last thing that we need to do, is go ahead and integrate it into an actual font face declaration, that contains it as simply part of the overall whole. Because you don't want, just a separate declaration just for that. And then I'm going to go back to my html file, I'm going to remove the 64 declaration, then I'm going to go to my base CSS, and I'm going to modify this.

Let's make life easier on ourselves and use copying and paste. That's nice, right? So I'm going to copy, the original font face declaration, and then just below it I'm going to paste it. Now the reason that I'm going to do this, is because we need to get rid of everything except, for the EOT declaration in the first one. Internet Explorer doesn't play well very well with Base64 encoding, so We need to create a separate declaration, for just the EOT files. Now, what we can do at this point is take off every body, except for the true type and the SVG files below that.

So right here where it says Source that's where we're going to put all this stuff. Alright. So again I'm going to highlight all of this. And pay particular attention to exactly where I'm grabbing this from. So I'm copying the format declaration, and up top I'm copying everything from the URL on. Now in source and notice the comma right there. It separates these individual calls. I'm going to paste all of that. So essentially now we have two font face declarations, that we're going to be using for chunky latin. The first one is going to handle Internet Explorer.

The second one is going to provide the base 64 encoding, in case any of the other fonts aren't available. That will help out with again the cross domain issues. And after that, it falls back to TrueType and SVG fonts. So now I can take this, font face declaration, which is now extraneous. And get rid of it. And I know we just did a lot there. I'm more interested in making sure that you understand what base 64 encoding is doing for you, instead of knowing exactly how it works, and where to put everything. Because there's a ton of, of article out there, and information for you that you can go read about the data URI specification.

And you really want to read up on it so if you're doing this yourself you really now how to do it. The other thing you can do is go to a generation service like font squirrel, and run your fonts through that. Even if you don't need to convert the fonts, you can run say your WAF file though, that and it will add to the CCS file that comes out base 64 and coding. And then you can just copy and paste that. So there's a lot of different options for you out there, but right, our font family, this is chunky_latin. Our source is initially the eot file, and then after that it's the, base64 encoding and after that it falls back to truetype and svg.

So I'm going to save this. I'm going to go back to my HTML file, and I'm going to refresh my preview. And indeed it shows up again. so it's definitely working. Awesome. As I mentioned, I really doubt your going to need do your own base 64 encoding all that often like I mention. All those web bot generators out there, have the option of including base 64 as part of the process. However, even if you never have to do it yourself. It's extremely helpful to understand, what Data URI is, and where it fits, in deploying icon fonts.

Show transcript

This video is part of

Image for Deploying Icon Fonts for the Web
Deploying Icon Fonts for the Web

21 video lessons · 1818 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Deploying Icon Fonts for the Web.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.