Often while designing websites, and writing articles, images not just help in adding to the aesthetics but also cutting through the long slabs of text. More often than not, these images also include text. In fact, sometimes, that when we do not find appropriate images, we simply convert text to images with some cool looking background. There are some websites, for e.g., websites which publish quotations, which would incorporate text in images as this format is more shareable and would get more success via Social Media. Of course, fonts matter too - The same phrase in different fonts will convey different messages.

However, there is one problem. The text included in images is hidden from Search Engines and thus might affect SEO.

While there are many beautiful fonts available, web designers used to opt for images for the format issues in past. But now with web-fonts, a balance can be achieved. The text would be stylised and would look great, but would still be text, and thus won’t be hidden from the search engines. You could even use general text-on-image overlay techniques to break the slab of text.

A Word of Caution

So, the look of an image, some stylised beautiful text which is still searchable - such a win-win situation, right? Why one would think, is not everyone using web-fonts all the time? Well, a designer has to be careful not to overuse it. There can be a serious impact on speed if web-fonts are overused, or are hosted on websites that may cause high loading times.

Uploading & Using Web-fonts

The steps are quite simple. Upload the font file to your server, and save it in the same folder with your CSS file (this is not compulsory, but helps in reducing errors related to paths and URLs). We’ve chosen two fonts, “The Conquer” and Cordaro. Both of these fonts are available on TheHungryJPEG.com.

Check out a few presentational images of these amazing fonts. SEO and Aesthetics - The Web-fonts BalanceSEO and Aesthetics - The Web-fonts Balance

SEO and Aesthetics - The Web-fonts Balance

SEO and Aesthetics - The Web-fonts Balance

SEO and Aesthetics - The Web-fonts Balance

Replacing the name Cordaro with the font of your choice, for each font you want to include, add the following lines of code:

@font-face {
font-family: 'Cordaro';
src: url('webfonts/Cordaro.eot'); /* for IE9 *
src: url('webfonts/Cordaro.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfonts/Cordaro.woff') format('woff'), /* Contemporary Browsers */
url('webfonts/Cordaro.ttf') format('truetype'), /* Safari, Android etc */
url('webfonts/Cordaro.svg#svgFontName') format('svg'); /* Legacy iOS */}

In our case, these lines would be added two times.

Further, include these lines to specify the added font families:

h1 {
color: #1F1F1F;
font-family: 'Conquer';
font-size: 40pt;}
div {
    font-family: 'Coradaro';
}

Finally, use the font-families in HTML tags, like div, h1 etc.

h1 {
color: #1F1F1F;
font-family: 'Conquer';
font-size: 40pt;}
div {
    font-family: 'Coradaro';
}

<body>
<h1>Obsessed with Quotes</h1>

<div>At Quoterpillar.com, we are wholeheartedly obsessed --  Fascinated by how a few words come together to hold the crux, to mean a world, to make a difference. Be it the hilarious punchline of a movie, the essence of an entire book, the sensual expression of deep passion, or the jittery sensation of falling in love deeply, madly and forever. And we wish to share this obsession with you.</div>

Here is a screenshot of a rendered HTML page including simple h1 and div tags.

Where to find Web-Fonts?

While there is an impressive number hosted by Google Fonts, you can find more on the website TheHungryJPEG.com. There are many web-fonts you can find here, some of them even for free, but they might be included in bundles, or be provided as individual freebies which expire after a specific duration. So follow TheHungryJPEG.com, make sure you get their newsletter.

Disclaimer: All the images above use the web-fonts currently being provided by THJ. Here are the links from which you can purchase them:

https://thehungryjpeg.com/product/82139-the-conquer-brush-typeface/

https://thehungryjpeg.com/product/84751-cordaro-sans-serif-typeface/

(There are also many designers who allow you to convert the fonts into web-fonts. But always read the licensing terms carefully)