Use Custom Fonts to Personalize your Website

wooden block stamp fontsOne of the most commonly under-appreciated elements of websites is font-choice. A well chosen font can do much to improve the look, feel, and readability of your site. Why not improve your site with a font that suits your personal style?

Choosing Top Quality Fonts

Searching for a typeface that will effectively communicate your site’s message can be a challenging process, but keep these tips in mind and you’ll be able to pick out a compelling font.

First you need to decide where the font will be used; you don’t necessarily want to use the same font-style for your body copy as your website title. While you can get pretty creative with a website title or heading, you’ll want to be more conservative when it comes to body copy, because fancy fonts can be hard to read. It’s also best practice to avoid mixing too many different fonts-types together. Try not to use more than 2 or 3 fonts to avoid incongruities.

Here are some things to consider when choosing a font for your website:

Readability: A font that is unreadable at a small size can be incredibly effective when used at a larger size and smaller fonts don’t necessarily look as good when enlarged. Be sure to look at both small and large examples of the font before making a decision. Also, ensure that any special characters or numbers you may plan on using are just as legible.

Relevancy: The classic “chiller” creepy font probably shouldn’t be used for a children’s sing-along site and you’ll want to stay away from comic sans if you’re building a site for a symphonic metal band. Keep both your audience and the mood of your work in mind when choosing a font to ensure visitors to your site don’t get mixed signals.

Originality: Some fonts are ubiquitous, we see them all the time for certain things and they trigger an immediate response in the reader’s mind. Take caution tape or wet floor signs for example, when someone sees any text in that font they automatically relate it to danger, something to be wary of. Unless you are trying to take advantage of this default response then you don’t want to use a font like that. Find a typeface that can identify your brand and your fans will always be able to recognize when you’re coming to town.

Where to find fonts:

Here are a few sites with great choices for fonts, both paid and free.

http://www.fontsquirrel.com/

http://www.fontspace.com/category/music

http://www.dafont.com/

http://www.1001freefonts.com/

http://www.google.com/fonts

(Note that Google fonts are hosted by Google and they have directions a bit different than what is below).

 How to Upload a Custom Font to Your Site

Note: this section assumes a basic understanding of HTML and CSS. You must also have the ability to access and edit your site files.

To use a custom font on your site you’ll first want to download the font (either from one of the sources above or elsewhere). The font will most likely come in a TTF format but to make sure it works with all browsers you’ll also need to acquire it in an EOT format. If your font download did not come with EOT then you can create a version of it at the URL below.

http://www.kirsle.net/wizards/ttf2eot.cgi

Once you have the fonts downloaded you can upload them to your site (preferably in a /fonts folder).

After the fonts are uploaded to your site you’ll need to use the @font-face property in your stylesheet, this code can also be added in between style tags in the head code of your site. An example of this code is below.

@font-face {

font-family: my_font;

src: url(‘http://www.domainname.com/fonts/my_font.eot’);

src: url(‘http://www.domainname.com/fonts/my_font.eot?#iefix’) format(’embedded-opentype’),

url(‘http://www.domainname.com/fonts/my_font.ttf’) format(‘truetype’),

url(‘http://domainname.com/fonts/my_font.ttf’) format(‘truetype’);

}

Once you’ve uploaded your files and added that code (with your font file location substituted) then you’re pretty much ready to go! Apply the font using the name you used in the font-family field within the stylesheet or even by using inline CSS as shown below.

<p style=”font-family: my_font;”>My Awesome Band</p></code>

What’s an example of a great font you’ve seen used by a band? Let us know what you think in the comments section below.

Downdload free guide: 10 website optimization tips

2 comments to Use Custom Fonts to Personalize your Website

  • Good article. However, although there are thousands of fonts available, not all of them are installed on a user’s computer, nor do all browsers support all fonts. For this reason, it is very important to have more than one font type available for the user’s browser to use to style the text on the screen.

  • Nick Lowery

    Excellent point! Applying fonts this way should be widely effective because they are hosted from the site, however there could still be visitors with outdated browsers. For that reason you should create a font stack.

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>