Best Script Google Web Fonts

Best Script Google Web Fonts

Google Web Fonts are easy to use on any website and add a personal touch.

A selection of favorite Google’s script web fonts

ARIZONIA

script-fonts-Google-Arizonia

Google Font Arizonia

HTML

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

CSS

CSS    
font-family: 'Arizonia', cursive;

GREAT VIBES

Google Font Great Vibe

Google Font Great Vibes

HTML

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

CSS

CSS    
font-family: 'Great Vibes', cursive;

TANGERINE

Google Font Tangerine

Google Font Tangerine

HTML

html    
<link href='https://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>

CSS

CSS    
font-family: 'Tangerine', cursive;

PACIFICO

Google Font Pacifico

Google Font Pacifico

HTML

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

CSS

CSS    
font-family: 'Pacifico', cursive;

LOBSTER

Google Font Lobster

Google Font Lobster

HTML

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

CSS

CSS    
font-family: 'Lobster', cursive;

LOBSTER TWO

Google Font Lobster

Google Font Lobster Two

Lobster Two comes in two weights, regular 400 and bold 700, each available as regular and italics:
http://www.google.com/fonts#QuickUsePlace:quickUse

HTML

html    
<link href='https://fonts.googleapis.com/css?family=Lobster+Two:400,400italic' rel='stylesheet' type='text/css'>

CSS

CSS    
font-family: 'Lobster Two', cursive;

How to implement Google Fonts?

You can start using the Google Fonts API in just two steps:

1. Add a stylesheet link to request the desired web font(s):

Source code    
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Font+Name">

2. Style an element with the requested web font, either in a stylesheet, for example:

Source code    
h1 {
  font-family: 'Font Name', serif;
}

or with an inline style on the element itself:

Source code    
<div style="font-family: 'Font Name', serif;">Your text</div>

Google Web Fonts

Want to see all of Google’s web fonts: http://www.google.com/fonts#

1 Comment

  1. Keith Carangelo
    January 17, 2018

    I love the list. The links to the fonts should probably be under https:// and not http:// for most sites now. Also, the Pacifico font on Google is different – I think the example is in Great Vibes.