Regardless of the kind of website you operate, one of the easiest ways to customize its look and feel is by changing the fonts you use to display your text. A different font can create a different atmosphere or feeling, can help to connect you with your website visitors or customers, and can even help you turn prospects into customers.

Web Fonts

But there are only a few standard fonts that you can be confident your visitors will have available on their own computers and devices. A web browser will only be able to apply a particular font if it happens to be installed on that user’s computer. In order to avoid any display errors, web designers often use one or more of the five generic font families which are always available in HTML.

One way around this limitation is to make use of “web fonts.” Web fonts are fonts and typefaces that you can incorporate into your website in such a way that your users’ browsers will be able to make use of them, regardless of what they already have installed on their own computers.

Google Web Fonts

One of the most popular techniques for making use of new fonts is the Google Web Fonts service. There are currently over 500 different fonts that Google makes available for free.

Once you find a font that you want to use, click on the “Quick-use” link to find the appropriate code. Google provides a link to the web font on its servers, which means that you don’t need to download or host the font yourself. You can implement the new font by using a standard <href> html link, a Javascript, or by using @import.

Once you’ve included the appropriate link as the first element in the <head> of your webpage, you add the font name to your style sheet with “font-family” in the same way that you would with any other font. If you want to include multiple Google Web Fonts on a single web project, click the “Add to Collection” button for each and then use the code links for the entire collection.

Font Squirrel

The other leading free web font service is Font Squirrel. Font Squirrel does not serve its fonts directly, but you can download the “@font-face Kit” and host the fonts on your own web server.

Place the fonts you’ve downloaded somewhere in your file structure for the site (it might be helpful to create a separate “fonts” folder), then link to that folder from your style sheet. As soon as a new visitor comes to your site, they’ll download your selected fonts into their browser, and you’ll be able to ensure that your website looks exactly the way you want it to.

If you decide to take advantage of the power of Web fonts, make sure to do so in a way that makes sense for the message or image you’re trying to convey to your visitors. It’s easy to get carried away and over style the text on your website simply because you can. Resist that temptation and deliver the best possible experience to your visitors.

Categories : Web Development, Web Design
Tags : Web Fonts

author's photo

Author : Blue Cloud

Just a normal software developer who love to write code. Developing professional software since 1999. After working in the software industry for many years, I've started my own website to share knowledges and experiences.

blog comments powered by Disqus