Using custom fonts using CSS?

Question

I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).

And they support a nice amount of browsers.

How does one do that? While also preventing people from having free access to download the font, if possible.

Answer 1

Generically, you can use a custom font using @font-face in your CSS. Here's a very basic example:

@font-face {     font-family: 'YourFontName'; /*a name to be used later*/     src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/ } 

Then, trivially, to use the font on a specific element:

.classname {     font-family: 'YourFontName'; } 

(.classname is your selector).

Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.

You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS @font-face rules, so you don't have to write your own).

while also preventing people from having free access to download the font, if possible

Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.

I hope that helped!

Answer 2

To make sure that your font is cross-browser compatible, make sure that you use this syntax:

@font-face {     font-family: 'Comfortaa Regular';     src: url('Comfortaa.eot');     src: local('Comfortaa Regular'),           local('Comfortaa'),           url('Comfortaa.ttf') format('truetype'),          url('Comfortaa.svg#font') format('svg');  } 

Taken from here.