Web Fonts

In my PHP group project I have been given the role of being the designer for the interface of the website. Since we are using CSS3 I decided that using font-face will help with the design, and it did, tremendously.

Here is the first version of the interface:

Now here is the redesign using web fonts (Actual link – http://shopright.phonghuynh.ca):

Also with some colour changes but we are talking about fonts here. I think most would agree that the redesign looks better and that the fonts do make a big difference. The only problem is that really old versions of browsers do not support web fonts.

The redesign uses the fonts Bebas Neue for headings/navigation and Open Sans for paragraph text.

@font-face

To use web fonts you can use either the @font-face code or Google Web Fonts.

The @font-face code looks like this:

@font-face {
 font-family: 'BebasNeueRegular';
 src: url('../fonts/BebasNeue-webfont.eot'); /* IE9 Compatibility Modes */
 src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('../fonts/BebasNeue-webfont.woff') format('woff'), /* Modern Browsers */
 url('../fonts/BebasNeue-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
 url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); /* Legacy iOS */
 font-weight: normal;
 font-style: normal;
}

and to use the font

p {
     font-family: 'BebasNeueRegular';
}

you would simply copy this  line into wherever you want to use the font. The code is kind of tedious to write but you will most likely never type it out yourself because there are generators and websites like FontSquirrel where you can download the webfont kit that includes the code.

Google Web Fonts

Another way to use web fonts is with Google Web Fonts. Their way is much easier because the font is stored on their server. In addition, Google Web Fonts is open source and has an awesome API.

There are three different ways to add the font using Google Web Fonts, the most common is @import.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
p {
  font-family: 'Open Sans', sans-serif;
}