Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I change the Bootstrap default font family using font from Google?

I am creating a blog site and I want to change the Bootstrap font. In my import CSS in header I added this font

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> 

How can I use this as my bootstrap default font?

like image 658
user3651129 Avatar asked Jun 06 '14 06:06

user3651129


People also ask

How do I use Google Fonts in bootstrap studio?

Google Fonts To start, right click the Fonts group in the Design panel and choose the Manage Fonts option. This will bring up the Google Fonts browser. Here you can search for font families, filter by category and supported language, and activate the styles that you need.

What is the default bootstrap font?

Bootstrap 4 Default Settings The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.

What is bootstrap 5 default font-family?

Bootstrap 5 Default Settings Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-height is 1.5. In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

How do I change the font using Google Fonts in HTML?

To add google fonts, search for the google fonts, select the font category and family, then select the font style of your choice. Once you select the font, “copy the font link”, from the “selected families windows” and paste it in the head section of the HTML file.


1 Answers

First of all, you can't import fonts to CSS that way.

You can add this code in HTML head:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> 

or to import it in CSS file like this:

@import url("http://fonts.googleapis.com/css?family=Oswald:400,300,700"); 

Then, in your css, you can edit the body's font-family:

body {   font-family: 'Oswald', sans-serif !important; } 
like image 183
otopic Avatar answered Sep 22 '22 21:09

otopic