HTML/XHTML:CSS Techniques:Font Embedding

From virtualMV2015wiki
Jump to: navigation, search

Icon Objective.png


By the end of this page you will be able to:

  • use CSS to embed non standard fonts

If your website uses unique or uncommon fonts, as a designer, you want people to be able to see them.


@font-face tag

This was the simplest solution. You have to dedicate some site space to your font (and it has to be in multiple formats to cover the different web browsers (ttf, svg and eot)) but it should only take up about 150 KB per font. The @font-face tag and code goes into your CSS.

How To:

  1. Select your font - there are plenty of free fonts around on the web.
  2. Convert it into the required formats. You can use a program called ttf2eot for going from ttf to eot. The website Font Squirrel will let you upload your source file then convert it into all the other types for you. It will also generate the @font-face code and provide a sample html page so you can see how to use it.
  3. Store the font files somewhere in the website directory
  4. Use the @font-face tag in the CSS file to access your fonts


@font-face {

font-family: 'LithosProRegular'; <------------------------------------------------GIve it a name, you choose what

src: url('../font/lithospro-regular-webfont.eot'); <-----------------------------Source of eot file for IE this MUST be the first format you use because it is for IE and if you don't put it first IE will not recognize it at all. Relative to the CSS location

src: local('LithosPro'), <-----------------------------Checks if user has font locally and so wont use the website one if they do

url('../font/lithospro-regular-webfont.ttf') format('truetype'), <----------------------Source for the ttf file relative to the CSS locaiton

url('../font/lithospro-regular-webfont.svg#webfont4oAHOfOv') format('svg'); <---------Source for the svg file relative to the CSS location

font-weight: normal;

font-style: normal;


h1 {

font-family:LithosProRegular; <---------------------Will use the font from the @font-face (or if user has installed it will use local copy)



File Type Support [1]:

IE Mozilla Safari Chrome Opera
.ttf No 3.5 3.1 2.0 10
.0tf No 3.5 3.1 No 10
.eot 4 No No No No
.svg No No 3.1 0.3 9.0


This has limitations and accessibility issues (as discussed in class). Including compromising screen readers, not being displayed if the user browses with images turned off and taking away the ability for the user to copy and paste a section of text.


Mixture of Flash and Java Script used to display the text in the font you want. More on sIFR3 + tutorial


Headings, IFrames and IE

If you plan on using the font in a heading h3{font-family:MyFont;} and you plan on displaying the page using the heading in an IFrame IE has trouble getting the font right. To overcome this make a class that specifies the font as it's font face and assign it to the IFrame. If the IFram is in a div assign the font to the div as well. So you end up with: h3{font-family:MyFont;} .fontFix{font-family:MyFont; .....other properties} #iFrameContainer{font-family:MyFont; .....other properties}

Firefox and local files

Problem: "Firefox (which supports @font-face from v3.5) does not allow cross-domain fonts by default. This means the font must be served up from the same domain (and sub-domain) unless you can add an “Access-Control-Allow-Origin” header to the font".[2]

Fix: When using Font Squirrel to convert fonts to different formats use the Expert view and in the CSS Options tick base64 encoding. This will embedd the ttf into the CSS.

--Carpet4 07:16, 28 September 2010 (UTC)

Icon References.png References

  1. Govett, D. (n.d). How to achieve cross-browser @font-face support. Retrieved October 05, 2010, from
  2. Evason, G. (n.d). Cross domain workaround for @font-face and Firefox. Retrieved October 05, 2010, from

HTML/XHTML:CSS Techniques:Font Embedding. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 17, 2017, from    (zotero)