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