HTML/XHTML:CSS Techniques:Font Embedding

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

Example:

@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)

font-size:60px;

}

File Type Support :

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

sIFR3
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}
 * 1) 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".

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)