Embeding Font Files How To Embed Fonts To Your Site

A lot of web designers run into the same problem of wanting a certain font type, but the question comes up "How do I guarentee the font to show up without the viewer's computer to install the font on the computer?"

it's easy, just follow these steps.

The first thing you have to do is download and install Weft 3 from microsoft, it's free, the download link is on that page.

the easiest way you can embed a font is by using the wizard and follow the steps commanded to you. Easy, but what if you really want to know how the program works, or don't want to go the sissy way with the embedding wizard? then follow these steps:

Step 1) Obviously the first step is to create a web page to embed a font on. After you've created the webpage to embed a font to then open Weft 3 (the only program which allows you to embed fonts to your site).

Step 2) The program will first prompt you for your name and email, then it will ask for the website you wish to embed a file to, enter the address of the .html/.htm file and click add, click next, then analyze pages.

Step 3) after the analysis, a list of all the fonts used on the webpage you selected will be previewed.

before each font there is an icon, those icons tell you

- green checkmark - font can be embedded legally

- red x mark - font cannot be embedded legally

- yellow ? mark - the font does not need to be embeded because it is a windows default font.

if you wish to add a font that is not listed, simply click on "add" and find the font you wish to be added to the list.

Step 4) after all of the desired fonts are selected click next. a window asking for the directory of the page will appear. input which directory, it needs to go in the same directory as the webpage itself. then click next.

if you wish to have the same font for mulitple sites in multiple directories then the next window is for you, it's pretty self explanitory. just input the directories you desire to share that/those embedded file(s).

Step 5) in order for it to work on the webpage you finally have to alter the code itself, just a simple modification:

for CSS:

- where you have file:///C|/.../ replace with this:

src: url(fonts/TEMPUSS0.eot);

- just make sure the *.eot file is in the correct directory.

for HTM/HTML:

- should find the file on it's own. NICE HUH

after that is finished, all you have to do is save the project and exit, then when you upload the page to your online host just upload everything in that directory along with it.

thanks,

-matt

This method ONLY works if you're using IIS as your web-server and is not universally applicable to the other non-MS web-servers (which are the majority). When you write articles like this, make sure you mention your system spec and the software you are using. Otherwise it leaves the readers groping in the dark.