Beautiful Google Font Combinations

Idea Book
Beautiful
Google Font
Combinations
Chaterine Josepha | BootPages.com
01
Idea Book
Beautiful Google Font Combinations
Chaterine Josepha / BootPages.com
© 2014 BootPages
Hello,
I like typography
Font selection and combination is crucial in design. It's also a fun process! Using Google
fonts, I tried as many as combinations as I could and matched them using different
backgrounds (photos) to produce thematic designs. This process triggers many new
ideas and with more than 600 Google fonts to choose from, the possibilities are wide.
Here I would like to share some beautiful Google font combinations that I found are
effective for using in cover, website header or landing page designs.
In this process, I use the following tools/resources:
●
●
Photos from pixabay.com, morguefile.com and unsplash.com.
BootPages (bootpages.com), a responsive site builder/designer tool. You can
sign up for BootPages free account and start using the tool. I will show you
later how to use BootPages to quickly experiment with font combinations.
04
I will present the result using the following format:
Google Font Combination
CSS
Preview
(sample usage)
Please enjoy!
05
Floral
Beauty & Fantastic
06
Oswald /
Nothing You Could Do
CSS:
@import url(http://fonts.googleapis.com/css?family=Oswald|
Nothing+You+Could+Do);
.line1 { font-family: Oswald, sans-serif; font-size: 74px; }
.line2 { font-family: Nothing You Could Do, cursive; font-size: 40px; }
Photo: http://pixabay.com/en/background-bloom-blooming-blossom-71266
07
Tailor-Made Creativity
Lorem Ipsum is simply dummy text of the printing industry
08
Cinzel /
Dosis
CSS:
@import url(http://fonts.googleapis.com/css?family=Dosis:200|
Cinzel);
.line1 { font-family: Cinzel, serif; font-size: 44px; }
.line2 { font-family: Dosis, sans-serif; font-size: 17px; }
Photo: http://pixabay.com/en/orange-thread-color-view-threads-166858
09
Art Studio
Lorem Ipsum is simply dummy text of the printing industry
10
Satisfy /
Roboto
CSS:
@import url(http://fonts.googleapis.com/css?family=Satisfy|
Roboto);
.line1 { font-family: Satisfy, cursive; font-size: 60px; }
.line2 { font-family: Roboto, sans-serif; font-size: 15px; }
Photo: http://pixabay.com/en/brush-color-paint-child-play-art-96240
11
Photography
Inspiring Gallery
12
Carrois Gothic SC /
Sacramento
CSS:
@import url(http://fonts.googleapis.com/css?family=Carrois+Gothic+SC|
Sacramento);
.line1 { font-family: Carrois Gothic SC, sans-serif; font-size: 35px; }
.line2 { font-family: Sacramento, cursive; font-size: 75px; }
Photo: http://pixabay.com/en/woman-camera-hand-lens-67127
13
Love Nature
Lorem Ipsum is simply dummy text
14
Passion One /
Forum
CSS:
@import url(http://fonts.googleapis.com/css?family=Passion+One|
Forum);
.line1 { font-family: Passion One, cursive; font-size: 75px; }
.line2 { font-family: Forum, cursive; font-size: 20px; }
Photo: http://pixabay.com/en/grass-grassy-stalks-green-164352
15
Vacation Expert
Lorem Ipsum is simply dummy text of the printing industry
16
Kaushan Script /
Didact Gothic
CSS:
@import url(http://fonts.googleapis.com/css?family=Kaushan+Script|
Didact+Gothic);
.line1 { font-family: Kaushan Script, cursive; font-size: 44px; }
.line2 { font-family: Didact Gothic, sans-serif; font-size: 16px; }
Photo: http://pixabay.com/en/morocco-africa-desert-marroc-sand-123964
17
Low Price & Free Shipping
18
Allura /
Fjalla One
CSS:
@import url(http://fonts.googleapis.com/css?family=Allura|
Fjalla+One);
.line1 { font-family: Allura, cursive; font-size: 35px; }
.line2 { font-family: Fjalla One, sans-serif; font-size: 36px; }
Photo: http://www.morguefile.com/archive/display/823781
19
Header Caption
Lorem Ipsum is simply dummy text of the printing industry
20
Montserrat Subrayada /
Source Sans Pro
CSS:
@import url(http://fonts.googleapis.com/css?family=Montserrat+Subrayada|
Source+Sans+Pro:200);
.line1 { font-family: Montserrat Subradaya, sans-serif; font-size: 55px; }
.line2 { font-family: Source Sans Pro, sans-serif; font-size: 19px; }
Photo: http://pixabay.com/en/rain-machine-road-auto-water-122709
21
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
22
Squada One /
Cinzel
CSS:
@import url(http://fonts.googleapis.com/css?family=Squada+One|
Cinzel);
.line1 { font-family: Squada One, cursive; font-size: 41px; }
.line2 { font-family: Cinzel, serif; font-size: 16px; }
Photo: http://pixabay.com/en/bus-vehicel-london-bus-london-163916
23
Candlelight
Shining Bright
24
Rouge Script /
Julius Sans One
CSS:
@import url(http://fonts.googleapis.com/css?family=Rouge+Script|
Julius+Sans+One);
.line1 { font-family: Rouge Script, cursive; font-size: 40px; }
.line2 { font-family: Julius Sans One, sans-serif; font-size: 55px; }
Photo: http://pixabay.com/en/burning-candle-celebration-15666
25
Responsive
Beautiful Content
26
Redressed /
Passion One
CSS:
@import url(http://fonts.googleapis.com/css?family=Redressed|
Passion+One);
.line1 { font-family: Redressed, cursive; font-size: 44px; }
.line2 { font-family: Passion One, cursive; font-size: 75px; }
Photo: http://pixabay.com/en/sunset-poppy-backlight-174276
27
The Touch Of Nature
Lorem Ipsum is simply dummy text of the printing industry
28
Julius Sans One /
Cinzel
CSS:
@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One|
Cinzel);
.line1 { font-family: Julius Sans One, sans-serif; font-size: 60px; }
.line2 { font-family: Cinzel, serif; font-size: 16px; }
Photo: http://unsplash.com
29
Sightseeing Tour
Nulla vitae elit libero, a pharetra augue mollis interdum.
30
Advent Pro /
Bad Script
CSS:
@import url(http://fonts.googleapis.com/css?family=Bad+Script|
Advent+Pro:300);
.line1 { font-family: Advent Pro, sans-serif; font-size: 66px; }
.line2 { font-family: Bad Script, cursive; font-size: 19px; }
Photo: http://pixabay.com/en/kuala-lumpur-petronas-twin-towers-170985
31
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
32
Bad Script /
Special Elite
CSS:
@import url(http://fonts.googleapis.com/css?family=Bad+Script|
Special+Elite);
.line1 { font-family: Bad Script, cursive; font-size: 52px; }
.line2 { font-family: Special Elite, cursive; font-size: 15px; }
Photo: http://pixabay.com/en/gleboczek-poland-sky-clouds-forest-95303
33
Public Library
Lorem Ipsum is simply dummy text of the printing industry
34
Voltaire /
Bilbo
CSS:
@import url(http://fonts.googleapis.com/css?family=Bilbo|Voltaire);
.line1 { font-family: Voltaire, sans-serif; font-size: 60px; }
.line2 { font-family: Bilbo, cursive; font-size: 20px; }
Photo: http://pixabay.com/en/hubei-provincial-library-building-201612
35
Global Shipping & Freight
Lorem Ipsum is simply dummy text of the printing industry
36
Marcellus SC /
Carrois Gothic SC
CSS:
@import url(http://fonts.googleapis.com/css?family=Marcellus+SC|
Carrois+Gothic+SC);
.line1 { font-family: Marcellus SC, serif; font-size: 44px; }
.line2 { font-family: Carrois Gothic SC, sans-serif; font-size: 16px; }
Photo: http://pixabay.com/en/yacht-sea-port-luxurious-200410
37
House of Denim
Lorem Ipsum is simply dummy text of the printing industry
38
Kite One /
Maven Pro
CSS:
@import url(http://fonts.googleapis.com/css?family=Kite+One|
Maven+Pro);
.line1 { font-family: Kite One, sans-serif; font-size: 63px; }
.line2 { font-family: Maven Pro, sans-serif; font-size: 19px; }
Photo: http://pixabay.com/en/blue-pink-brown-color-stack-166852
39
Health
WELLNESS
40
Give You Glory /
Archivo Narrow
CSS:
@import url(http://fonts.googleapis.com/css?family=Give+You+Glory|
Archivo+Narrow);
.line1 { font-family: Give You Glory, cursive; font-size: 44px; }
.line2 { font-family: Archivo Narrow, sans-serif; text-transform:
uppercase; font-size: 75px; }
Photo: http://pixabay.com/en/orange-food-juicy-fruit-188082
41
Natural Paint
Converse with colors..
42
Satisfy /
Source Sans Pro
CSS:
@import url(http://fonts.googleapis.com/css?family=Satisfy|
Source+Sans+Pro:200);
.line1 { font-family: Satisfy, cursive; font-size: 60px; }
.line2 { font-family: Source Sans Pro, sans-serif; font-size: 18px; }
Photo: http://pixabay.com/en/dressing-rooms-beach-houses-18596
43
Vintage Furniture
Make The Best Of Your Space
44
Give You Glory /
Julius Sans One
CSS:
@import url(http://fonts.googleapis.com/css?family=Give+You+Glory|
Julius+Sans+One);
.line1 { font-family: Give You Glory, cursive; font-size: 60px; }
.line2 { font-family: Julius Sans One, sans-serif; font-size: 23px; }
Photo: http://pixabay.com/en/bar-local-hard-drive-pillow-table-197960
45
Loveable Craft
Lorem Ipsum is simply dummy text of the printing industry
46
Bigelow Rules /
Carrois Gothic SC
CSS:
@import url(http://fonts.googleapis.com/css?family=Bigelow+Rules|
Carrois+Gothic+SC);
.line1 { font-family: Bigelow Rules, cursive; font-size: 109px; }
.line2 { font-family: Carrois Gothic One, sans-serif; font-size: 19px; }
Photo: http://pixabay.com/en/bucovina-easter-eggs-romania-202193
47
Your Adventurous Side
Lorem Ipsum is simply dummy text
48
Comfortaa /
Raleway
CSS:
@import url(http://fonts.googleapis.com/css?family=Comfortaa:300|
Raleway:100);
.line1 { font-family: Comfortaa, cursive; font-size: 40px; }
.line2 { font-family: Raleway, sans-serif; font-size: 20px; }
Photo: http://unsplash.com
49
VINTAGE CAFE
Lorem Ipsum is simply dummy text of the printing industry
50
Shadows Into Light Two /
Marcellus SC
CSS:
@import url(http://fonts.googleapis.com/css?family=Marcellus+SC|
Shadows+Into+Light+Two);
.line1 { font-family: Shadows Into Light Two, cursive; text-transform:
uppercase; font-size: 50px; }
.line2 { font-family: Marcellus SC, serif; font-size: 17px; }
Photo: http://unsplash.com
51
Wedding Planner
Lorem Ipsum is simply dummy text of the printing industry
52
Rouge Script /
Aubrey
CSS:
@import url(http://fonts.googleapis.com/css?family=Rouge+Script|
Aubrey);
.line1 { font-family: Rouge Script, cursive; font-size: 92px; }
.line2 { font-family: Aubrey, cursive; font-size: 28px; }
Photo: http://pixabay.com/en/flower-bouquet-leaf-nature-green-22441
53
PROVIDER OF HANDMADE NECKTIES
Lorem Ipsum is simply dummy text of the printing industry
54
Forum /
Give You Glory
CSS:
@import url(http://fonts.googleapis.com/css?family=Forum|
Give+You+Glory);
.line1 { font-family: Forum, cursive; font-size: 44px; }
.line2 { font-family: Give You Glory, cursive; font-size: 19px; }
Photo: http://pixabay.com/en/neckties-link-italy-210346
55
Way Back To Nature
Lorem Ipsum is simply dummy text
56
Julius Sans One /
Nothing You Could Do
CSS:
@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One|
Nothing+You+Could+Do);
.line1 { font-family: Julius Sans One, sans-serif; font-size: 50px; }
.line2 { font-family: Nothing You Could Do, cursive; font-size: 17px; }
Photo: http://pixabay.com/en/flowers-flower-plants-spring-164965
57
Sweet Candies
Lorem Ipsum is simply dummy text of the printing industry
58
Bonbon /
Julius Sans One
CSS:
@import url(http://fonts.googleapis.com/css?family=Bonbon|
Julius+Sans+One);
.line1 { font-family: Bonbon, cursive; font-size: 58px; }
.line2 { font-family: Julius Sans One, sans-serif; font-size: 16px; }
Photo: http://www.morguefile.com/archive/display/154868
59
ARCHITECTURAL DESIGN
Lorem Ipsum is simply dummy text of the printing industry
60
Poiret One /
Nothing You Could Do
CSS:
@import url(http://fonts.googleapis.com/css?family=Poiret+One|
Nothing+You+Could+Do);
.line1 { font-family: Poiret One, cursive; text-transform: uppercase;
font-size: 50px; }
.line2 { font-family: Nothing You Could Do, cursive; font-size: 17px; }
Photo: http://unsplash.com
61
Community Cycling
For the Riders!
62
Sanchez /
Bad Script
CSS:
@import url(http://fonts.googleapis.com/css?family=Sanchez|
Bad+Script);
.line1 { font-family: Sanchez, cursive; font-size: 57px; }
.line2 { font-family: Bad Script, serif; font-size: 23px; }
Photo: http://pixabay.com/en/tree-bike-bike-ride-rhine-172147
63
Fresh Aromatherapy
Lorem Ipsum is simply dummy text of the printing industry
64
Lovers Quarrel /
Quicksand
CSS:
@import url(http://fonts.googleapis.com/css?family=Lovers+Quarrel|
Quicksand);
.line1 { font-family: Lovers Quarrel, cursive; font-size: 97px; }
.line2 { font-family: Quicksand, sans-serif; font-size: 18px; }
Photo: http://pixabay.com/en/star-anise-aroma-aromatic-brown-2932
65
More flavors. More delicious.
Lorem Ipsum is simply dummy text of the printing industry
66
Courgette /
Didact Gothic
CSS:
@import url(http://fonts.googleapis.com/css?family=Courgette|
Didact+Gothic);
.line1 { font-family: Courgette, cursive; font-size: 57px; }
.line2 { font-family: Didact Gothic, sans-serif; font-size: 19px; }
Photo: http://pixabay.com/en/waffle-dessert-ice-cream-65716
67
Building for a sustainable future
Lorem Ipsum is simply dummy text of the printing industry
68
Ubuntu Condensed /
Bilbo
CSS:
@import url(http://fonts.googleapis.com/css?family=Bilbo|
Ubuntu+Condensed);
.line1 { font-family: Ubuntu Condensed, sans-serif; font-size: 50px; }
.line2 { font-family: Bilbo, cursive; font-size: 21px; }
Photo: http://pixabay.com/en/city-skyscraper-skyscrapers-185742
69
TAXI SERVICES
FAST & SAFE
70
Macondo /
Kite One
CSS:
@import url(http://fonts.googleapis.com/css?family=Kite+One|
Macondo);
.line1 { font-family: Macondo, cursive; text-transform: uppercase;
font-size: 30px; }
.line2 { font-family: Kite One, sans-serif; text-transform: uppercase;
font-size: 58px; }
Photo: http://pixabay.com/en/traffic-cars-street-city-at-night-189115
71
Combining Fonts using BootPages
BootPages (bootpages.com) is a responsive site builder/designer tool. You can
sign up for a free account and start using the tool.
In BootPages, you will see a toolbox containing beautifully designed content blocks
that you can drag and drop into your page. Bellow, I drag a header content block
and drop it into my page.
72
Click the design tab as shown in the screenshot bellow. Then you can click on the
header text and start choosing the font.
You can also embed a photo into the header image placeholder to see how the
combination works with the photo.
73
74