Adding Google fonts to your Bootstrap theme

In this beginner tutorial we’ll show you how to add Google Fonts to your Bootstrap theme. This will work for both Bootstrap 3 & Bootstrap 4 themes.

What are Google Fonts?

As browsers and web technology evolved so too did the desire of web designers to expand passed the standard font sets like Arial, Helvetica and sans-serif. These standard fonts were seen as a safe bet as they were generally available across Windows & Mac operating systems.

Along came Google Fonts (a long with many others, see “Alternatives” below) offering a palette of web friendly Fonts a designer might expect to see in Photoshop! Google Fonts now contains 708 fonts, the most popular fonts include Open Sans, Roboto, Source Sans Pro, Raleway and more.

Best bit is they’re super easy to integrate into your site, here’s how.


Adding fonts to your site

First things first, pick a font or fonts you like by heading over to www.google.com/fonts.

1) Pick the font

We’re a big fan of all the fonts mentioned above so we’ll pick Raleway for our example.


2) Add to collection

Click the “Add to collection” button next to the font you want to add it to a collection, we won’t do this in our example but you could add multiple fonts to your collection to include in your site in one go.


3) Personalise the font

Next hit the “Use” button to the right of the “Collection” bar at the bottom which will take you to a new screen where you can personalise the font settings to your needs.

ATTENTION As you can see by the “Page Load” gauge on the right, using fonts have effect site performance so just add the settings & font styles/weights you think you will actually use, you can always some back later and add more. For example, do you really need the “Thin 100” & “Ultra-Bold 900” styles weight a font weight between 300 and 800 is sufficient.

For our example we’ll take the following to keep the load light:

  • Light 300
  • Normal 400
  • Bold 700

Note the numeric bit as we’ll combine them with our CSS code later.

Choose the character sets you need based on the language of your website, note not all fonts support all characters but you can check out the ones that do here: www.google.com/fonts/earlyaccess


4) HTML

Google then gives us a nice link tag to copy and paste into the head on your website, full code might look like so:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="author" content="BootBites.com">
  <link rel="icon" href="img/favicon.ico">

  <title>Site Title</title>

  <!-- Bootstrap core CSS via MaxCDN -->
  <link href="https://cdn.rawgit.com/twbs/bootstrap/v4.0.0-alpha.2/dist/css/bootstrap.css" rel="stylesheet">

  <!-- My CSS -->
  <link href="css/default.css" rel="stylesheet">

 <!-- Google Fonts -->
 <link href='https://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'> 
</head>

5) CSS

The final step is to add the new font to our CSS so we can use it.

If you want to use the font sitewide add the font-family definition to your body tag:

body {
  font-family: 'Raleway', sans-serif;
  font-weight: 400; // Corresponds to the Bold 400 style
}

Notice we’ve add a font-weight too and that this corresponds to the “Normal 400” setting we selected in step 3.

Now we can tell CSS a bit more about our font weights based on our font settings.

strong,
.text-strong {
  font-weight: 700; // Corresponds to the Bold 700 style
}

 

.text-light {
  font-weight: 300; // Corresponds to the Light 300 style
}

If you just wanted the font for one specific element or let’s say header text you would just add the font-family definition to the tags that need it like so:

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
}

Result

And there you go, Google Fonts:

No Coments

    Leave a Reply

    Your email address will not be published. Required fields are marked *