Home / Tutorials / CSS3 / CSS3 font Embedding in HTML

CSS3 font Embedding in HTML

/
/
630 Views

Want to get away from ‘Web Safe’ fonts for some attractive headers AND do it without using an image? Use CSS3 font Embedding and embed a font-face!

NOTE: This article uses font file stored online and your browser may run slow or attempt to crash… sorry!

Don’t forget to subscribe to our RSS-feed, follow us on Twitter and follow us on Facebook – for recent updates.

@font-face is not strictly speaking ‘CSS3′; it was originally born in CSS 2 and although not appearing in CSS 2.1, CSS 3 is attempting to bring it into the standards.

In order to use a font, we first must call it using the ‘@font-face’ attribute and this must be done for each individual font we wish to use. Although I’m sure you have a few, you can download some fonts to experiment with here, at dafont.com.

CSS 3 Embedded Font Face

HELLO CSS 3 WORLD!

The above header uses the SketchRockwell font with the following CSS 3 applied to it.

CSS 3 Font Embed (Example I)

[css]
@font-face {
font-family: ‘SoftSugarplainRegular’;
src: url(‘fonts/Softplain-webfont.ttf’);
}

.fontface {
font: 40px ‘SoftSugarplainRegular’, Arial, sans-serif;;
letter-spacing: 0;
text-align:center;
}
[/css]

CSS3 can render type using several font formats: “truetype” (ttf),
“opentype” (otf), “embedded-opentype” (eot) and
“scalable-vector-graphic” (svg,svgz).

HELLO CSS 3 WORLD!

We can also apply additional effects such as a Text Shadow.

CSS 3 Font Embed (Example II)

[css]
@font-face {
font-family: ‘SoftSugarplainRegular’;
src: url(‘fonts/Softplain-webfont.ttf’);
}
.fontface1 {
font: 40px ‘SoftSugarplainRegular’, Arial, sans-serif;
letter-spacing: 0;
text-align:center;
text-shadow: 3px 3px 7px #111;
}
[/css]

NOTE:For some reason, using both @font-face and text-shadow will cause problems in Google Chrome. The reason IE has been given a ‘?’ next to it for the @font-face attribute, is because it will work using the popular .eot font file…

An example for those on alternative browsers, not seeing the embedded font..

Pixel2Pixel Design RSS Feed for more daily web development tutorials and articles.

Subscribe to our Newsletter

If you liked this article, then please subscribe to our newsletter for latest web resources. You can also find us on Twitter and Facebook.

2 Comments

  1. Very cool – I’d heard about this, but hadn’t tried it myself yet.

    I’m curious about browser compatibility.

    “NOTE: This article uses font file stored online and your browser may run slow or attempt to crash… sorry!” Is there a size limitation on fonts that causes that?

Leave a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Blog For All The Latest & Greatest Freebies!

Following our blog is a great way to make sure that you are up to date on the latest and greatest Freebies and WordPress news.

We don't spam and your information will never be shared.

Subscribe To Our Blog For All The Latest & Greatest Freebies!

Following our blog is a great way to make sure that you are up to date on the latest and greatest Freebies and WordPress news.

We don't spam and your information will never be shared.