How can I get my users to automatically download the font that I use for my site if it does not have one?

Question

My site uses the font ff-clifford-eighteen-web-pro-1 . I want all text to be displayed using this font even for users who have not installed it on their machine.

Is it possible?

Answer 1

You can use the @ font-face generator. It allows you to download your fonts, and it will create an excellent ZIP download using CSS and all the related files needed to get your custom font running on your site.

http://www.fontsquirrel.com/fontface/generator

They also have many licensed font sets ready for use on your site:

http://www.fontsquirrel.com/fontface

Another great site that lets you “rent” licensed fonts is TypeKit.

http://typekit.com/

Answer 2

You can not. If the font is not located in the system where the browser is located, the font will not be found and cannot be downloaded.

You will need to distribute the font on client systems (if you have a license for this).

Answer 3

Short answer: you cannot

The long answer is: you could, but it was not easy and did not receive wide support. Read more in this article .

Answer 4

I am using Cufon . Works great, but you should also check licensing.

Answer 5

Here is a link to a million ways to embed custom fonts (and hold typography prints)

He recommends sIFR3

Answer 6

With the font stored in the font folder (for example: fontFolder ), you should use the @ font-face generator to automatically force the user to download the font so that it will be displayed wherever you specify the site. Below, fontFolder represents the directory (folder) in which font files live, and fontName represents the font name (sits inside fontFolder ). If you have .eot.tff.woff and .svg font options stored in fontFolder , you can copy the code below to the beginning of the stylesheet and replace fontFolder with your own directory name and replace fontName with your font name:

 @font-face { font-family: "fontName"; src: url('fontFolder/fontName.eot'); src: url('fontFolder/fontName.eot?#iefix') format('embedded-opentype'), url('fontFolder/fontName.woff') format('woff'), url('fontFolder/fontName.ttf') format('truetype'), url('fontFolder/fontName.svg')format('svg'); } 

When you're ready to use your font, just use its name:

 h1 { font-family: yourFont; }