Graphic Design shadow to enhance presentation of images.
Graphic Design shadow to enhance presentation of images.

Web Design - Tips, Tricks and Programmng

@font-face code provided by Font Squirrel

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum

Previous Thread Return to Topic Next Thread
Author Message

17 Designs

17 Designs

Date Joined:
Jan 19, 2010

Posts:
66

Posted: Wed Jun 13, 2012 09:09 AM

Subject: @font-face code provided by Font Squirrel

Looking to add interesting fonts to your web design that work across browsers?

Thank's to the updated @font-face CSS code (first introduced in CSS2 but newly revamped for CSS3) we can include an endless supply of stylish fonts to enhance our generally boring heading <h1> .. <h6>, paragraph <p>, <li>, <cite>, etc. etc.

We recommend creating a folder within your site called /fonts. This is where you will store your font source files .eot, .svg, .ttf and .woff.

Visit the Font Squirrel website. Browse the nicely organized categories and then download the complete kit for each font.

Below is an example of adding a new font to your CSS file:

@font-face {
font-family: 'JustOldFashionRegular';
src: url('../fonts/JustOldFashion-webfont.eot');
src: url('../fonts/JustOldFashion-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/JustOldFashion-webfont.woff') format('woff'), url('../fonts/JustOldFashion-webfont.ttf') format('truetype'), url('../fonts/JustOldFashion-webfont.svg#JustOldFashionRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Use this new font to stylize a tag.

h1 {
font-family: "JustOldFashionRegular";
font-size: 32px;
line-height: 34px;
color: #ffb3ee;
text-align: left;
margin: 0 0 10px 0;
padding: 0 0 0 0;
text-decoration: none;
}

It's that simple. Enjoy!

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum