Font Styling Online Is Intuitive, Fun & Free with this Cute Tool

Do your font styling online easily

Recently, I tried a cute tool for font styling online, I found that if you're into web development or designing, this tool could be a big time saver.

There is no guesswork, it's completely WYSIWYG, everything is happening in real time, and so you may not hesitate to try out different font styling online before selecting the font that suits your requirement.

What’s more, the tool also gives you the CSS code ready for use.

The icing on the cake is that the tool is free to use.

I'll reveal the tool's details shortly.

First, have a look at the animated illustration I just created for Merriweather font which can be downloaded from the Google font repository.

I like Merriweather, have used it extensively on this website.

However, if you wish to choose your ‘best’ Google font blazing fast, there is no better guide than this one I wrote earlier.

Okay, here is the animated illustration for font styling online.

Do your font styling online easy and fast

Notice how easy and intuitive it is to use this tool and do your font styling online.

Using CSS for font styling online

Let's look at the CSS snippet that the font styling above has generated:

font-family: Merriweather
font-size: 24px
line-height: 1.45
font-weight: 400
letter-spacing: 1.45px
word-spacing: 2px;

If I now want to use this CSS property to the inline style of a paragraph, the resultant HTML code will be as under.

<p style="font-family: Merriweather; font-size: 24px; line-height: 1.45; font-weight: 400; letter-spacing: 1.45px; word-spacing: 2px;">It is fun and intuitive to do font styling online with this tool.</p>

How will the paragraph look like with this font-styling?

Here it is (given below), with some extra styles added.

It is fun and intuitive to do font styling online with this tool.

The HTML code for the paragraph above is as under, the extra style elements appear in red color.

<p style="font-family: Merriweather; font-size: 24px; line-height: 1.45; font-weight: 400; letter-spacing: 1.45px; word-spacing: 2px; background: #f5f5f5; padding: 20px; margin: 30px 0; border: 4px double #d0d0d0; text-transform: capitalize; color: #c90;">It is fun and intuitive to do font styling online with this tool.</p>

Web fonts vs web safe fonts

We have just seen how the tool for font styling online helps you not only to select the web fonts you want to use, but also how they appear when different styles are applied to them.

The tool though has another important use, which is to minimize the font style mismatch when a page loads.

In this context, let us understand the difference between web fonts and web safe fonts.

You may be aware that ever since the World Wide Web Consortium (W3C) agreed to recommend the Web Open Font Format, WOFF in 2010, there has been a flood of beautiful Open Type Fonts (OTF) or True Type fonts (TTF), many of which are free to use.

Merriweather is a Serif web font, and when a page that has used Merriweather starts loading on a browser, the font is 'called' from Google font repository.

Often, you'll find, there is a very brief yet perceptible time gap between loading of a page and 'availability' of the web font used on that page.

In this brief interlude, the browser loads web safe fonts that are already pre-installed on your computer. The moment the web font used on the page is 'available', the browser immediately shifts to that.

In other words, there is a flash of unstyled content or text (or FOUC) between the initial render of your web safe font and the shift to the web font that you've chosen to use on a page. This usually results in a bit of jarring transition in the layout, which happens due to sizing discrepancies between the two fonts.

The pre-installed web safe fonts are not the same on all computers.

In that case, you may want to use a web safe font stack to choose several fonts that look similar, and are installed on the various operating systems that you want to support.

Sounds difficult?

Okay, here is an example of font stack (in red color) with the Merriweather web font, and Georgia, Cambria and Times New Roman as the web safe fonts.

p {
font-family: Merriweather, Georgia, Cambria, Times New Roman, Times, serif;
font-size: 30px;
line-height: 44px;
font-weight: 300;
font-style: italic;
color: #c90;
}

OR

p { font: italic 300 30px/44px Merriweather, Georgia, Cambria, Times New Roman, Times, serif; color: #c90; }

Try this CSS code in your web page, and see how the results come.

Before moving on, here is a screenshot of ready list of web safe fonts for different operating systems, courtesy this source.

You'll notice that some popular web safe fonts like
Arial,
Arial Black,
Trebuchet MS,
Verdana,
Georgia,
Times New Roman, and
Courier New
have more than 90% acceptance for both Windows and Mac operating systems.

It should now be easy for you to use web safe fonts along with your selected web fonts for fallback option.

Complete list of web safe fonts for all operating systems for font styling onlne

Minimize font style mismatch

Even though you know the web safe fonts that you can use for your chosen web font in the font stack, there is no guarantee that you can fully eliminate font style mismatch.

For example, if you are using Merriweather as the web font, can you use Times New Roman as the fallback web safe font?

Perhaps no, because if you compare the two, the mismatch is too evident to escape attention, even though both are serif fonts.

This problem can be minimized with the help of the same cute tool I used above for font styling online at the beginning of this post.

This I'm going to explain now.

Read the full post as a subscriber and enjoy these benefits!

  • All the supercool content creation hacks
  • Ready-to-use templates for video, animation, etc.
  • Quick tips to drive your business
  • Mini courses to help you succeed
  • Priority assistance for specific needs, and more..

Scroll to top