Embedding Fonts In Web Pages

Written by Saran on December 10, 2011, Updated October 11, 2018

Earlier we were stuck with few selections of web safe fonts, because we didn't have much choice. But times have changed, new web browsers can embed and render any stylish font, and this opens up new opportunity for Web developers to transform a basic looking design into something extraordinary.

If you have your own web font, you can easily include it using CSS @font-face, or you can go with online services who let you use their font for free or with some fee.

Free Font Embedding Services

There are few free online Font Embedding Services like Typekit, Google Web Fonts, TypeFront, they let you choose from hundreds of web fonts to use in your website, all you have to do is copy-paste css code they provide.For example: If I want to use Princess Sofia font from Google web font, I will just copy their css code and paste it within <head> section of my HTML code.[cc lang="css"] [/cc]Next I need to change the name of font to 'Princess Sofia' in my main CSS styles file, like this:[cc lang="css"] body{ font-family: 'Princess Sofia', cursive; color:#313131;font-size:1em; } [/cc]Now my whole body text will be transformed into this 'Princess Sofia' font.If you want greater variety and unique fonts, there are other popular commercial font embedding services available on the web, such as: Fonts Live, Fontdeck, Webtype, Fonts.com with over hundrades of fonts to choose from.

@font-face (Embedding a Custom Font)

You can host your own fonts and embed them into your websites using CSS @font-face. Please note: for cross browser compatibility, you will need different format of the font: .ttf (TrueType) .eot (Embedded OpenType) .svg (Scalable Vector Graphics) .woff (Web Open Font Format)..Don't worry if you have only one type, You can easily convert your font using @font-face generator such as Font Squirrel.@font-face If I want to use JennaSue font from Jenna Sue Design

Stylesheet Css code embedding necessary font formats for cross browser compatibility

CSS

@font-face {
  font-family: 'JennaSue';
  src: url('jennasue.eot');
  src: url('jennasue.eot?#iefix') format('embedded-opentype'),
  url('jennasue.woff') format('woff'),
  url('jennasue.ttf') format('truetype'),
  url('jennasue.svg#JennaSueRegular') format('svg');
  font-weight: normal;
  font-style: normal;
  }

Apply font to the elements. Apply font:

HTML

<style>
body{
font-family: 'JennaSue';
font-size:3em;
}
</style>

HTML code

HTML


<div class="myfontstyle">This text uses JennaSue Font</div>

Result:

This text uses JennaSue Font