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…

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…

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…

Latest Posts

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…

Server Security Best Practices — Complete Hardening Guide for Production Systems

Server Security Best Practices — Complete Hardening Guide for Production Systems

Every breach post-mortem tells the same story: an unpatched service, a…

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…

XSS and CSRF Explained — The Complete Guide with Real Attack Examples and Defenses

XSS and CSRF Explained — The Complete Guide with Real Attack Examples and Defenses

XSS and CSRF have been in the OWASP Top 10 for over a decade. They’re among the…

OWASP Top 10 (2021) — Every Vulnerability Explained with Code

OWASP Top 10 (2021) — Every Vulnerability Explained with Code

The OWASP Top 10 is the industry standard for web application security risks. If…