How can I make my users automatically download the font I use for my website if they don't have it?

My website uses the font ff-clifford-eighteen-web-pro-1. I want all my text to be displayed using that font even for the users that don't have it installed on their m开发者_如何学JAVAachine.

Is it possible?

---

You can use the @font-face generator. It allows you to upload your fonts and it will create a nifty .zip download with CSS and all the related files you need to get your custom font working for your site.

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

They also have a whole lot of licensed font-kits ready for use on your site too:

http://www.fontsquirrel.com/fontface

Another great site that allows you to "lease" licensed fonts is TypeKit.

http://typekit.com/

---

You can't. If the font is not on the system where the browser is, the font will not be found and cannot be loaded.

You will need to distribute the font to the client systems (if you have the licensing to do that).

---

Short answer: you can't

Long answer: you could, but it's not easy and not widely supported. Read this article for more information.

---

I use Cufon. Works great, but you also have to verify licensing.

---

Here is a link to A million ways to embed custom fonts (and keep typography nerds off your back)

He recommends sIFR3

---

With the font stored in a font folder (ex: fontFolder), you would use the @font-face generator to automatically make the user download the font so it would appear wherever on the site you specify. Below, fontFolder represents the directory (folder) where the font files live, and fontName represents the font name (sitting inside the fontFolder). If you currently have the .eot .tff .woff, and .svg variations of the font stored in the fontFolder, you can copy the below code into the top of your style sheet and replace fontFolder with your own directory's name, and replace fontName with the name of your font:

@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;
}