Google Font
Google font-family 'stacks' for HTML tags such as <p> and <h1>. Sourced from Google Fonts. Loading this page will download all of the fonts displayed below.
Source Sans Pro
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-sans-extra-light
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-sans-extra-light-italic
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-sans-light
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-sans-light-italic
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-sans
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-sans-italic
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-sans-semibold
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-sans-semibold-italic
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-sans-bold
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-sans-bold-italic
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-sans-black
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-sans-black-italic
<h2 class=font-google-source-sans">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-source-sans. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
Place the above link in your document <head>.
Source Serif Pro
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-serif-extra-light
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-serif-light
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-serif
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-serif-semibold
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-serif-bold
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-serif-black
<h2 class=font-google-source-serif">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-source-serif. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,600,700" rel="stylesheet">
Place the above link in your document <head>.
Source Code Pro
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-code-extra-light
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-code-light
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-code
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-code-medium
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-code-semibold
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-code-bold
Especially in technology, we need revolutionary change,
not incremental change.
font-google-source-code-black
<h2 class=font-google-source-code">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-source-code. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400,500,600,700,900" rel="stylesheet">
Place the above link in your document <head>.
Inconsolata
Especially in technology, we need revolutionary change,
not incremental change.
font-google-inconsolata
Especially in technology, we need revolutionary change,
not incremental change.
font-google-inconsolata-bold
<h2 class="font-google-inconsolata-bold">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-inconsolata-bold. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
Place the above link in your document <head>.
Noto Sans
Especially in technology, we need revolutionary change,
not incremental change.
font-google-noto-sans
Especially in technology, we need revolutionary change,
not incremental change.
font-google-noto-sans-italic
Especially in technology, we need revolutionary change,
not incremental change.
font-google-noto-sans-bold
Especially in technology, we need revolutionary change,
not incremental change.
font-google-noto-sans-bold-italic
<h2 class=font-google-noto-sans">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-noto-sans. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i" rel="stylesheet">
Place the above link in your document <head>.
Noto Serif
Especially in technology, we need revolutionary change,
not incremental change.
font-google-noto-serif
Especially in technology, we need revolutionary change,
not incremental change.
font-google-noto-serif-italic
Especially in technology, we need revolutionary change,
not incremental change.
font-google-noto-serif-bold
Especially in technology, we need revolutionary change,
not incremental change.
font-google-noto-serif-bold-italic
<h2 class=font-google-noto-serif">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-noto-serif. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i" rel="stylesheet">
Place the above link in your document <head>.
Lato
Especially in technology, we need revolutionary change,
not incremental change.
font-google-lato-thin
<h2 class="font-google-lato-thin">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply the font-google-[family]-[style] class of font-google-lato-thin. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
Place the above link in your document <head>.
Cormorant Garamond
Especially in technology, we need revolutionary change,
not incremental change.
font-google-garamond-light
Especially in technology, we need revolutionary change,
not incremental change.
font-google-garamond-light-italic
<h2 class="font-google-garamond-light">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-garamond-light. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,300i" rel="stylesheet">
Place the above link in your document <head>.
GFS Didot
Especially in technology, we need revolutionary change,
not incremental change.
font-google-didot
<h2 class="font-google-didot">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-didot. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=GFS+Didot" rel="stylesheet">
Place the above link in your document <head>.
Cardo
Especially in technology, we need revolutionary change,
not incremental change.
font-google-cardo
Especially in technology, we need revolutionary change,
not incremental change.
font-google-cardo-italic
Especially in technology, we need revolutionary change,
not incremental change.
font-google-cardo-bold
<h2 class="font-google-cardo-bold">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-cardo. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Cardo:400,400i,700" rel="stylesheet">
Place the above link in your document <head>.
Abril Fatface
Especially in technology, we need revolutionary change,
not incremental change.
font-google-abril
<h2 class="font-google-abril">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-abril. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
Place the above link in your document <head>.
Playfair Display
Especially in technology, we need revolutionary change,
not incremental change.
font-google-playfair
Especially in technology, we need revolutionary change,
not incremental change.
font-google-playfair-italic
Especially in technology, we need revolutionary change,
not incremental change.
font-google-playfair-bold
Especially in technology, we need revolutionary change,
not incremental change.
font-google-playfair-bold-italic
Especially in technology, we need revolutionary change,
not incremental change.
font-google-playfair-black
Especially in technology, we need revolutionary change,
not incremental change.
font-google-playfair-black-italic
<h2 class="font-google-playfair-black-italic">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-playfair. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
Place the above link in your document <head>.
Alegreya
Especially in technology, we need revolutionary change,
not incremental change.
font-google-alegreya
<h2 class="font-google-alegreya">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-alegreya. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Alegreya" rel="stylesheet">
Place the above link in your document <head>. Note that several other Alegreya fonts are available, from bold to black.
Montserrat
Especially in technology, we need revolutionary change,
not incremental change.
font-google-montserrat
<h2 class="font-google-montserrat">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-montserrat. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Place the above link in your document <head>. Note that several other Montserrat fonts are available, from thin to black.
Merriweather
Especially in technology, we need revolutionary change,
not incremental change.
font-google-merriweather
<h2 class="font-google-merriweather">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-merriweather. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
Place the above link in your document <head>. Note that several other Montserrat fonts are available, from thin to black.
Rubik
Especially in technology, we need revolutionary change,
not incremental change.
font-google-rubik
<h2 class="font-google-rubik">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-rubik. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
Place the above link in your document <head>. Many other weights are available from light to black, including italics.
Rubik Mono One
Especially in technology, we need revolutionary change,
not incremental change.
font-google-rubik-mono-one
<h2 class="font-google-rubik-mono-one">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-rubik-mono-one. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet">
Place the above link in your document <head>. Many other weights are available from light to black, including italics.
Passion One
Especially in technology, we need revolutionary change,
not incremental change.
font-google-passion-one-black
<h2 class="font-google-passion-one-black">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-passion-one-black. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Passion+One:900" rel="stylesheet">
Place the above link in your document <head>. Note that two other font styles are available.
Alpha One
Especially in technology, we need revolutionary change,
not incremental change.
font-google-alpha-one
<h2 class="font-google-alpha-one">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-alpha-one. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
Place the above link in your document <head>.
Pompiere
Especially in technology, we need revolutionary change,
not incremental change.
font-google-pompiere
<h2 class="font-google-pompiere">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-pompiere. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Pompiere" rel="stylesheet">
Place the above link in your document <head>.
Amatic SC
Especially in technology, we need revolutionary change,
not incremental change.
font-google-amatic
<h2 class="font-google-amatic">Especially in technology, we need revolutionary change...</h2>
Especially in technology, we need revolutionary change,
not incremental change.
font-google-amatic-bold
<h2 class="font-google-amatic-bold">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-amatic-bold. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700" rel="stylesheet">
Place the above link in your document <head>.
Special Elite
Especially in technology, we need revolutionary change,
not incremental change.
font-google-special-elite
<h2 class="font-google-special-elite">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-special-elite. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
Place the above link in your document <head>.
Cabin Sketch
Especially in technology, we need revolutionary change,
not incremental change.
font-google-cabin-sketch
<h2 class="font-google-cabin-sketch">Especially in technology, we need revolutionary change...</h2>
Especially in technology, we need revolutionary change,
not incremental change.
font-google-cabin-sketch-bold
<h2 class="font-google-cabin-sketch-bold">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-cabin-sketch-bold. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch:400,700" rel="stylesheet">
Place the above link in your document <head>.
Homemade Apple
Especially in technology, we need revolutionary change,
not incremental change.
font-google-homemade-apple
<h2 class="font-google-homemade-apple">Especially in technology, we need revolutionary change...</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-homemade-apple. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">
Place the above link in your document <head>.
Libre Barcode 39 Text
Barcode
font-google-libre-barcode
<h2 class="font-google-libre-barcode">Barcode</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-google-[family]-[style] class such as font-google-libre-barcode. The default Google font family 'stack' can be adjusted in /evo_variables/_font.scss.
<link href="link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
Place the above link in your document <head>. Note that other font styles are available.