CODEWITHSUNDEEP
csshtml
scdmn jeh
scdmn jeh

Reputation: 201

How do you use multiple Google Fonts in a webpage?

I know this is a short question, but how do you use multiple custom Google Fonts, i.e Baloo and Roboto, in the text? In this example the text should be Roboto and headings should be Baloo. Thanks for your time.

Upvotes: 20

Views: 36097

Answers (4)

choongmanee
choongmanee

Reputation: 121

google fonts is now using css2 and the answers above are outdated.

the solution using css2 would be: https://fonts.googleapis.com/css2?family=Baloo&family=Roboto

source: google fonts doc for css2

Upvotes: 11

Turnipdabeets
Turnipdabeets

Reputation: 6005

  1. Go to https://fonts.google.com/

  2. Search for say Roboto - https://fonts.google.com/specimen/Roboto

  3. Hit "select this font" and you'll get a link to add to you html like this:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Note: You can also get one line with multiple fonts by piping the families.

  1. Add this link(s) in your <head> tag

  2. Use CSS to select the font with font-family.

See example below:

h1{
  font-family: "Baloo"
}

p{
  font-family: "Roboto"
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
</head>

<body>
    <h1>Baloo</h1>
    <p>Roboto</p>
</body>

Upvotes: 6

James
James

Reputation: 323

Use as many as you want and import them as a stylesheet. https://fonts.google.com/

For your example:

h1 { font-family: 'Baloo', cursive; }
p { font-family: 'Roboto', sans-serif; }
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<h1>heading</h1>
<p>paragraph</p>

Upvotes: -1

Michael Coker
Michael Coker

Reputation: 53664

You click "select this font" for each font you want to use, and google will give you a single link tag with multiple fonts. You can also include multiple link tags for each font.

h1 {
  font-family: Baloo;
}
h2 {
  font-family: Roboto;
}
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
<h1>Baloo</h1>
<h2>Roboto</h2>

Upvotes: 21

Related Questions