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

How to Make Sticky Block in Sidebar using Bootstrap

How to Make Sticky Block in Sidebar using Bootstrap

Note: This is based on bootstrap-4 If you are using multi column design in your…

Jenkins Pipeline with Jenkinsfile - How To Schedule Job on Cron and Not on Code Commit

Jenkins Pipeline with Jenkinsfile - How To Schedule Job on Cron and Not on Code Commit

Introduction In this post we will see following: How to schedule a job on cron…

Jenkins Pipeline - How to run Automation on Different Environment (Dev/Stage/Prod), with Credentials

Jenkins Pipeline - How to run Automation on Different Environment (Dev/Stage/Prod), with Credentials

Introduction I have an automation script, that I want to run on different…

How to Git Clone Another Repository from Jenkin Pipeline in Jenkinsfile

How to Git Clone Another Repository from Jenkin Pipeline in Jenkinsfile

Introduction There are some cases, where I need another git repository while…

How to Fetch Multiple Credentials and Expose them in Environment using Jenkinsfile pipeline

How to Fetch Multiple Credentials and Expose them in Environment using Jenkinsfile pipeline

Introduction In this post, we will see how to fetch multiple credentials and…

Jenkinsfile - How to Create UI Form Text fields, Drop-down and Run for Different Conditions

Jenkinsfile - How to Create UI Form Text fields, Drop-down and Run for Different Conditions

Introduction I had to write a CICD system for one of our project. I had to…

Latest Posts

Deep Dive on Elasticsearch: A System Design Interview Perspective

Deep Dive on Elasticsearch: A System Design Interview Perspective

“If you’re searching, filtering, or aggregating over large volumes of semi…

Deep Dive on Apache Kafka: A System Design Interview Perspective

Deep Dive on Apache Kafka: A System Design Interview Perspective

“Kafka is not a message queue. It’s a distributed commit log that happens to be…

Deep Dive on Redis: Architecture, Data Structures, and Production Usage

Deep Dive on Redis: Architecture, Data Structures, and Production Usage

“Redis is not just a cache. It’s a data structure server that happens to be…

Deep Dive on API Gateway: A System Design Interview Perspective

Deep Dive on API Gateway: A System Design Interview Perspective

“An API Gateway is the front door to your microservices. Every request walks…

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…