bootstrap|September 09, 2018|1 min read

How to Use Google Fonts in Website design with Bootstrap

TL;DR

Add the Google Fonts stylesheet link in your HTML head, then override Bootstrap's body font-family in your CSS. That's it — two lines of code.

How to Use Google Fonts in Website design with Bootstrap

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.

Related Posts

Youtube Rest API response details

Youtube Rest API response details

Here, we give exact response from youtube apis.

Drupal 8 - How to add custom class to a drupal table view

Drupal 8 - How to add custom class to a drupal table view

Introduction Suppose you have a view, and you have configured your display as a…

How to put Code in your blog/article

How to put Code in your blog/article

For programmers, who want to write about their codes. Its often the first…

How to get Youtube Video Thumbnail Images

How to get Youtube Video Thumbnail Images

If your youtube video looks like:https://www.youtube.com/watch?v=g0kFl7sBdDQ…

Python - How to apply patch to Python and Install Python via Pyenv

Python - How to apply patch to Python and Install Python via Pyenv

Introduction In this post, we will see how we can apply a patch to Python and…

An Effective GIT Branching Strategy

An Effective GIT Branching Strategy

Its essential to prepare a git branching strategy. This helps greatly in…

Latest Posts

REST API Design: Pagination, Versioning, and Best Practices

REST API Design: Pagination, Versioning, and Best Practices

Every time two systems need to talk, someone has to design the contract between…

Efficient Data Modelling: A Practical Guide for Production Systems

Efficient Data Modelling: A Practical Guide for Production Systems

Most engineers learn data modelling backwards. They draw an ER diagram…

Deep Dive on Caching: From Browser to Database

Deep Dive on Caching: From Browser to Database

“There are only two hard things in Computer Science: cache invalidation and…

System Design Patterns for Real-Time Updates at High Traffic

System Design Patterns for Real-Time Updates at High Traffic

The previous articles in this series covered scaling reads and scaling writes…