How to Use Google Fonts in Website design with Bootstrap

September 09, 2018

If you are using Bootstrap, the default font that comes with the package is pretty simple and is not classy.

Using Google Fonts

Google font is a free service provided by Google. The service provides a wide veriety of collection of fonts free of cost.

Using Google Fonts

To use google fonts on your web design is very simple. Goto Google Fonts site. There are plenty of fonts with their sample text. Browse through them, and select the one you want by clicking a Plus icon on them.

Using Google Fonts

This will show a link to use, something like:

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

and a css code to put, something like:

font-family: 'Open Sans', sans-serif;

Put in your Html

Goto your html code, paste the link in betwene your head section.

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

And, in your website css file,

body {
  font-family: 'Open Sans', sans-serif;
  min-height: 75rem;
  padding-top: 4.5rem;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Open Sans', sans-serif;
}
p {
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
}

That is it.

You will see changed font in effect in your website.

Thanks for reading.

bootstrapgoogle fontsgoogle fonts bootstrapusing google fonts

Similar Posts

Latest Posts