CODEWITHSUNDEEP
htmlfonts
Mc-
Mc-

Reputation: 4056

add any font to an HTML page

Newbie question: Can I embed any font into HTML. For example the Rockwell font?

Thanks!

Upvotes: 0

Views: 2546

Answers (6)

RandomWebGuy
RandomWebGuy

Reputation: 1439

Yes. Where FontFamilyName is what ever you want to call it and src: url('/font/font.otf'); is a link to the fonts file (much like using a background image).

@font-face {
    font-family: FontFamilyName;
    font-weight: bold;
    src: url('/font/font.otf');
}

You can then use the font like any other font family. ex:

p
{
font-family: FontFamilyName;
}

Upvotes: 2

Martin Jespersen
Martin Jespersen

Reputation: 26183

If you follow the bulletproof font-face syntax you can embed most any font into webpages.

You can use a free font-conversion service like font squirrel to convert your font's into the formats you need to support all browsers :)

Upvotes: 1

KyleWpppd
KyleWpppd

Reputation: 2030

Not really. You are limited to cross-browser fonts if you want to be sure the page will display the same across browsers.

That being said, there is an interesting service called Typekit that lets you embed fonts using JS and CSS3. It only works for modern browsers.

Upvotes: -1

captbrogers
captbrogers

Reputation: 494

It is possible using @font-face in your stylesheet, but you have to remember that IE doesn't always handle these properly. Use this code:

@font-face {
    font-family: (the name you want to call it by);
    src: url('path/to/font.eof');
}

You can also use .otf, or .ttf.

Upvotes: 0

Mārtiņš Briedis
Mārtiņš Briedis

Reputation: 17762

Google offers a pretty nice service called Webfonts, check it out!

Upvotes: 1

Russ Cam
Russ Cam

Reputation: 125488

take a look at @font-face that allows you to use any font on your page - if the user does not have that font installed, it can be downloaded from a server and used to render the web page.

An example

@font-face {
    font-family: DeliciousRoman;
    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
    font-weight:400;
}

Take a look at font-face website for more details. Be aware that there are some cross browser issues with @font-face - for this, I would recommend looking at the stellar work of Paul Irish in this regard.

Upvotes: 0

Related Questions