Text effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Google Font Examples

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

SEE THE CSS CATEGORY FOR TEXT BASICS

When you import fonts from google use only one or two so they load quickly
For that reason the examples below (other than the top two) are images generated in web studio

Serif and Sans Serif Fonts

SERIF FONTS
The title for this example is "georgia" that is bold, and this text is "times new roman" both considered web safe fonts.
So what is serif? It’s the little decorative stroke that extends from letters. It can be in the form of a tail, sharp or blunt, decorative or plain.

SANS SERIF FONTS
The title for this example is "arial" that is bold, and this text is "verdana" both considered web safe fonts.
This style of typeface lacks strokes at the ends of letters (hence "sans" serif).
I personally prefer to use "verdana" since it was designed specifically for computer screens

<P style="font-family: 'Kameron', Georgia, serif">

The <P> tag style

<link href='http://fonts.googleapis.com/css?family=Kameron' rel='stylesheet' type='text/css'>

<P style="font-family: 'Lobster', Georgia, Times, serif">

The HEAD link

These two are the live examples so you can see how they load the combinations below this one are images

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

The font used for the example in this content text is Kameron
Below are the links you paste into the HEAD and the style you paste in your paragraph

An Example using Lobster fonts as a Title

The <P> tag style

<P style="font-family: 'Berkshire Swash', Helvetica, sans-serif">

The HEAD link

<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>

The <P> tag style

<P style="font-family: 'Oleo Script', Helvetica, sans-serif">

The HEAD link

<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>

The <P> tag style

<P style="font-family: 'Merienda One', Helvetica, sans-serif">

The HEAD link

<link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>

The <P> tag style

<P style="font-family: 'Pacifico', Helvetica, sans-serif">

The HEAD link

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

The <P> tag style

<P style="font-family: 'Arizonia', Helvetica, sans-serif">

The HEAD link

<link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>

The <P> tag style

<P style="font-family: 'Cookie', Helvetica, sans-serif">

The HEAD link

<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>

The <P> tag style

<P style="font-family: 'Great Vibes', Helvetica, sans-serif">

The HEAD link

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>

The <P> tag style

<P style="font-family: 'Leckerli One', Helvetica, sans-serif">

The HEAD link

<link href='http://fonts.googleapis.com/css?family=Leckerli+One' rel='stylesheet' type='text/css'>

The <P> tag style

<P style="font-family: 'Allan', Helvetica, Arial, sans-serif">

The HEAD link

<link href='http://fonts.googleapis.com/css?family=Allan:bold' rel='stylesheet' type='text/css'>

The <P> tag style

<P style="font-family: 'Bevan', Georgia, serif">

The HEAD link

<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>

The <P> tag style

<P style="font-family: 'Abril Fatface', Georgia, serif">

The HEAD link

<link href='http://fonts.googleapis.com/css?family=Abril+Fatface' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

The HEAD link

<P style="font-family: 'Playfair Display', Georgia, serif">

The <P> tag style

Thank-you

Text effects in Web Studio 5 - Google font examples - by Web Studio Next

aaaaaaaaaaaaiii