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

One of the winners of a free copy of Magazine Premium (see this article) recommended implementing @font-face kits to the theme. I had examine @font-face however ne'er truly tried to use it before. I did slightly additional analysis and at last patterned it out. currently ten @font-face kits area unit obtainable with Magazine Premium and that i thought it might be an honest plan to indicate you the way I did it.

Adding @font-face fonts to your information processing system isn't that troublesome. It simply takes many steps.

First, you wish to transfer some @font-face kits. i prefer to use kits provided by Font Squirrel as a result of they need associate degree awe-inspiring library and every one their fonts area unit 100 percent free for industrial use. For this instance I’m planning to use Riesling.

Once you have got the files downloaded you wish to feature them to your information processing system. produce a folder named “fonts” and place the riesling.eot and riesling.ttf files into the folder. transfer that to your web site, in to a similar directory as your sheet of paper.

Now open your sheet of paper and add the following:

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.