Beautiful Fonts for Your Website

When putting together a website, your font choices are just as important as your content. Within the past few years fonts are being made available online for web designers. In the past it was a hassle trying to create a beautiful website with 10 standard fonts, and if you didn’t want to use those fonts you would have to create images out of the ones you did use. Simple fix, but there was a down side: with your website loading all these images the load time for the page was very long for the user.

Why do I need special fonts for my website?

When designing your website there are many things that come into play; the #1 most important item is your logo. Without a logo, it is unwise to set up a website because your logo will not be the strongest element defining your brand, rather your website’s colors and layout will drive the tone/look and feel of the site. Your logo should define the colors of the website, the style of the website, and your type choices for the website.

Where Do I Find fonts for my website?

Because web-safe fonts are becoming popular, there are many websites that offer them both free and commercially. Some free websites are Font Squirrel and Google Fonts. These are great for any client or person on a budget. If you are looking for high quality fonts, Adobe Typekit and My Fonts are the way to go, but these websites charge you for the fonts.

How Do I implement these new beautiful fonts?

Depending on the website you decide to use there are two main ways to implement fonts. The first way is to download the .zip file and install it onto your website and reference it in your .css file. The second way is to link an external file in your tag and reference it in your .css file. Let us talk about the first way, so after downloading your .zip you go ahead unzip it and see multiple files (.eot, .woff, .ttf, .svg) these files tell the different browsers how to render the font. Make sure to place these files into your website directory so they are able to be referenced. Then you simply paste this code into your referenced .css file and change the name FontName to the name of the font you will be using:

@font-face {
 font-family: ‘FontName’;
 src: url(‘FontName.eot’);
 src: url(‘FontName.eot?#iefix’) format(’embedded-opentype’),
 url(‘FontName-webfont.woff’) format(‘woff’),
 url(‘FontName-webfont.ttf’) format(‘truetype’),
 url(‘FontName-webfont.svg#FontName’) format(‘svg’);
 font-weight: normal;
 font-style: normal;
}

SIMPLE!

Now let us talk about the second way! We will use Google Font as an example, in this case Google allows you to download the font but it is much easier to reference it in your website. So after you have looked through the list of fonts you found one that you would like. You simple paste this code between your tags of your website and change FontName to the font you are using:

After linking this in your tag, move over to your .css file and place this at the top, again change FontName to the font you are using:

Font-family:’FontName’, sans-serif

Just be aware that Google provides both these tags for you and depending on the font you select they will differ.

Author: Crystal Darin is the Senior Web Designer/UX Specialist at Palm Beach Software Design, Inc.

This article was originally published by Palm Beach Software