Embedding Fonts

Embedding Fonts in your Web Site with CSS and @font-face

Adding @font-face fonts to your Web site is not that difficult. It just takes a few steps. Thanks to  bavotasan.com.

First, you need to download some @font-face kits. I like to use kits supplied by Font Squirrel because they have an awesome library and all their fonts are 100% free for commercial use. For this example I’m going to use Riesling.

Once you have the files downloaded you need to add them to your Web site. Create a folder named “fonts” and place the riesling.eot and riesling.ttf files into the folder. Upload that to your site, in to the same directory as your style sheet.

Now open your style sheet and add the following:

 * The fonts included are copyrighted by the vendor listed below.
 * @vendor:     Bright Ideas
 * @licenseurl: http://www.fontsquirrel.com/license/Riesling

@font-face {
	font-family: 'RieslingRegular';
	src: url('fonts/riesling.eot');
	src: local('Riesling Regular'), local('Riesling'),
              url('fonts/riesling.ttf') format('truetype');

Everything is in place for you to use Riesling as a font on your Web site. Just add it to your CSS like you would any other font-family:

h1 {
  font-family: 'RieslingRegular', Arial, sans-serif;

The one thing you need to realize when using @font-face kits is that only modern browsers recognize it.

This is a sample paragraph that uses @font-face kits and CSS. If you see this paragraph in Riesling then your browser supports @font-face. If not, you might need to upgrade your browser to take advantage of @font-face kits.

By max macapagal Posted in Posts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s