Designing With Unique Fonts While Maintaining Optimized Website Content

Using Webfonts for Best SEO Practices

Designing With Unique Fonts While Maintaining Optimized Website Content

Revised November 14, 2016
Originally Published August 9, 2011

When designing websites, it's important to balance form and function;

Make sure the website looks appealing AND works as required.

Until a few years ago, it was next to impossible for a web designer to achieve true SEO while trying to use unique, nonstandard fonts for page titles, or special texts.

Graphic and web designers seeking natural/organic SEO were limited to using, plain web fonts such as Arial, Times, Helvetica and a few other standard web friendly fonts.

If these designers wanted anything unique, custom or fancy for title font lettering, they would have to resort to using a graphic of the word.

The Font Style Dilemma

Search engines view website content as the most important factor when ranking websites (next to whether the website will run smoothly on various browsers instead of failing or rendering inaccurately). Therefore, it's imperative to keep as much website content in readable text format (instead of graphic images of desired fonts) for top SEO (search engine optimization) and to maintain top search engine ranking.

Since the readable text of a website (especially the titles and headers of a site) are the most important factors in SEO, this has left many web designers in a quandary as to how to create a unique aesthetic look for a site, while avoiding the use of boring Arial and Times New Roman fonts; all whilst maintaining best SEO practices.

Graphic designers can take any text in any font style (cursive, handwritten, etc) and create a graphic of the word or title. However, a graphic is not yet readable by all search engines. In order to achieve any substantial SEO with a graphic requires the use of an ALT tag on the graphic image.

While an ALT tag will help a search engine decipher what the graphic is about, it is not as powerful, effective, nor meaningful to search engines as using actual text; especially if used for a Header or Paragraph Title.

Before the advent of the webfont, if a web designer wanted to achieve maximum SEO, they would be limited to using regular, standard font styles for a Header or Paragraph Title (such as Arial, Times New Roman, or other standard fonts that come on most computers today).

When a font is not installed on a local user's computer, then the browser will simply default to a standard font on the user's computer such as Arial, Times and so on. Hence, by not creating a graphic of the special font style, the designer may loose any unique aesthetic originally intended due to lack of support of non-standard fonts in today's browsers.

A New Era For Unique Website Fonts

Fortunately, the days of limited font styles to choose when designing websites are over. With the advent of CSS3 and the ability to embed special fonts into a website stylesheet, designers can now create unique website looks using webfonts.

Webfonts allow a designer to achieve specialized looks with new fonts such as scripts, hand written, cursive and more. By using webfonts, the content is still actual text that is readable by search engines; hence designers avoid using graphic images of fonts that diminish the value of the text for SEO purposes.

There are several services out there that provide webfonts for designers to use in their website. However, probably the largest, free, and most reliable service would be Google's Webfonts.

Choosing a Reliable Webfont Service

When using a webfont service in a website style sheet, it's important that the service be a large and reputable service that will always be up and running. If the webfonts service were to go down, then the website using the webfonts service would no longer display the font intended by the designer.

Instead, the site would default to the standard fonts such as Arial, Times New Roman, etc that come available on the user's computer viewing the site.

Incorporating Webfonts Into A Website

Webfonts are relatively easy to incorporate into a website. Normally they only call for two additional lines of code, so hence are easy on processing power and easy to integrate into any existing website.

Using Google Webfonts as an example, one line of code normally would go into the header of the website calling the font from the webfont server:

<link href='' rel='stylesheet' type='text/css'>

Again using Google Webfonts as an example, the second line of code that would be supplied would go into the website style sheet:

font-family: 'Rochester', cursive;

For example, if we were to use the font on a header tag, simply add the following line of code into the style sheet for the appropriate H header tag:


h1 { font-family: 'Rochester', cursive; }


To summarize, webfonts allow designers to maintain the highest level of SEO possible while giving a website a unique aesthetic so as to set that website apart from other sites.

By using webfonts, a website designer has a great deal more flexibility in designing a unique website for a unique business, while avoiding monotonous fonts such as Arial and Times New Roman, and maintaining top-notch SEO practices.

Newsletter Article Ideas?

We want to hear about it! Our newsletter is geared towards you so email your article ideas or questions to

Newsletter Subscription Status

Back to List

Customer Testimonials

Advertising Solutions BBB Business Review
Advertising Solutions are Powered & Made in America
Follow Us
Find Advertising Solutions on Facebook Pages
Find Advertising Solutions on Twitter
Find Advertising Solutions on Google+
Find Advertising Solutions on LinkedIn
Find Advertising Solutions on Alignable - For Local Business Owners
We Accept Credit, Checks & PayPal
Accepted Payment Methods
Recommended Web Technologies
Recommended Website Programming Technologies
Recommended Integrated Solutions
Recommended 3rd Party Application Solutions