bootstrap1 Min Read

How to Use Google Fonts in Website design with Bootstrap

Gorav Singal

September 09, 2018

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.

Share

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…

Claude Code Skills — Build a Better Engineering Workflow with AI-Powered Code Reviews, Security Scans, and More

Claude Code Skills — Build a Better Engineering Workflow with AI-Powered Code Reviews, Security Scans, and More

Most developers use Claude Code like a search engine — ask a question, get an…

Building an AI Voicebot for Visitor Check-In — A Practical Guide to Handling the Messy Parts

Building an AI Voicebot for Visitor Check-In — A Practical Guide to Handling the Messy Parts

Every office lobby has the same problem: a visitor walks in, nobody’s at the…

Staff Engineer Study Plan for MAANG Interviews — The Complete 12-Week Roadmap

Staff Engineer Study Plan for MAANG Interviews — The Complete 12-Week Roadmap

If you’re a Senior Engineer (L5) preparing for Staff (L6+) roles at MAANG…

How to Be a Full-Time Freelancer: Resources, Finding Clients, and Building a Sustainable Business

How to Be a Full-Time Freelancer: Resources, Finding Clients, and Building a Sustainable Business

Making the leap from full-time employment to freelancing is one of the most…

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…

Latest Posts

Supply Chain Security — Protecting Your Software Pipeline

Supply Chain Security — Protecting Your Software Pipeline

In 2024, a single malicious contributor nearly compromised every Linux system on…

Security Ticketing and Incident Response

Security Ticketing and Incident Response

The worst time to figure out your incident response process is during an…

Security Mindset for Engineers — Think Like an Attacker

Security Mindset for Engineers — Think Like an Attacker

Most engineers think about security the way they think about flossing — they…

Secrets Management — Vault, SSM, and Secrets Manager

Secrets Management — Vault, SSM, and Secrets Manager

I’ve watched a production database get wiped because someone committed a root…

Penetration Testing Basics for Developers

Penetration Testing Basics for Developers

Most developers think of penetration testing as something a separate security…

OWASP Top 10 for Cloud Applications

OWASP Top 10 for Cloud Applications

The OWASP Top 10 was written for traditional web applications. But in the cloud…