Why is google font not working with bootstrap? - html

Google Fonts not working with bootstrap. I'm using Google Font and Bootstrap for my website, but google fonts don't seem to work. As soon as I comment out the bootstrap CSS, Google font appears again.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<!-- Bootstrap CSS -->
<!-- Try commenting this and font will start working -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Hello World</h1>
</header>
<!-- Bootstrap Script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
And CSS:
/* Google Font Link */
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
margin: 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgb(168, 168, 168)), to(#464645)) fixed;
/* Font Family Not Working */
font-family: 'Poppins', sans-serif;
}
header{
background-color: antiquewhite;
text-align: center;
padding: 10px;
}
JSFiddle Here
Tried Solution:
Google font not working with bootstrap This didn't work for me
Tried Googling around ...no solutions.

You can override the Bootstrap theme either by changing the source SASS files or by overriding the CSS variables used by the framework.
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
#import url('https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css');
:root {
--bs-font-sans-serif: Poppins;
}
<main role="main" class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>

This how it worked for me.
*{
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
outline: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/index-html.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300&display=swap" rel="stylesheet">
<title>Stackoverflow Answer</title>
</head>
<body>
<h1>Google Fonts Imported </h1>
<script rel="preconnect" src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Related

<hr> tag not showing based on Bootstrap version

<head>
<title>Startup</title>
<!-- Required meta tags -->
<!-- Recommended to always add them -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<!-- Allows <hr> tag to be seen
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-->
<!-- Prevents <hr> tag from being shown -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Your own stylesheet -->
<!-- Want to put it beneath Bootstrap's CSS since want it to have superior priority-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Hi, I'm new to learning html, css and bootstrap. I came across that a particular tag would not appear. It turns out the link I was using to receive the bootstrap CSS was the problem.
I've tried: Changing the css properties of the hr to different colours (still wouldn't show). The problem gets isolated to the link for bootstrap. The unusual thing is that it doesn't work with the second link being bootstrap 5.0.2, but it works with the first link bootstrap 4.3.1.
I've also tried to mark the css properties as !important on my own stylesheet placed beneath the bootstrap css.
Thank you for the help ^_^.
<!DOCTYPE html>
<html>
<head>
<title>Startup</title>
<!-- Required meta tags -->
<!-- Recommended to always add them -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<!-- Allows <hr> tag to be seen
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-->
<!-- Prevents <hr> tag from being shown -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Your own stylesheet -->
<!-- Want to put it beneath Bootstrap's CSS since want it to have superior priority-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--
h-100 means you want the container to span the entire height of page
Hence, you can get the the items aligned within the container at its center.
-->
<div class="container d-flex align-items-center h-100">
<div class="row">
<!--
Use col-12 since bootstrap grid system has 12 slots per row
using col-12, ensures your div spans the entire row.
-->
<header class="text-center col-12">
<h1 class="text-uppercase"><strong>The biggest startup event of the year</strong></h1>
</header>
<div class="buffer col-12"></div>
<section class="text-center col-12">
<hr>
<a href="https://mailchi.mp/b24dbfe7c665/kimchilettuce">
<button class="btn btn-primary btn-xl">Find out more</button>
</a>
</section>
</div>
</div>
</body>
</html>
Below is my css file
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
h1 {
color: #e2dbdb;
font-size: 3rem;
}
hr {
border-color: #F05F44;
border-width: 3px;
max-width: 75px;
}
.buffer {
height: 10rem;
}
.btn {
font-weight: 700; /*This is different from font size. This specifies how thick the words are*/
border-radius: 300px;
text-transform: uppercase;
}
.btn-primary {
background-color: #F05F44;
border-color: #F05F44;
}
.btn-primary:hover {
background-color: #ee4b08;
border-color: #ee4b08;
border-width: 4px;
}
.btn-xl {
padding: 1rem 2rem;
}
When using bootstrap css 4.3.1
When using boostrap css 5.0.2
This works fine for me
Please share your body part of the webpage. The error might be there.
h1 {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Startup</title>
<!-- Required meta tags -->
<!-- Recommended to always add them -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Sample text</h1>
<hr />
<h1>Sample text</h1>
<hr />
<h1>Sample text</h1>
<hr />
</body>
</html>
Hope this helps!

Stylesheet won't over ride Bootstrap - or I'm not linking it properly?

I can't get my css to over ride Bootstrap, or i'm not linking it properly? My .css is in the same file as my .html, I've placed my stylesheet below Bootstrap, still no avail. I've tried creating id's to over ride, still nothing. If I link in a stylesheet from W3Schools though it'll override Bootstrap. Is it just my css file? I know it's not best practice but I also tried using !important in my .css but still nothing. Here's my code:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
.h1 {
font-family: 'Roboto', sans-serif;
color:blue;
}
<!DOCTYPE html>
<html lang="en">
<HTML>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="photographywebsite.css">
<title>
Photography Website
</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</HTML>
The problem isn't with the linking of your Stylesheet.
Instead you are not referencing the element "h1" but an element with the class of "h1".
Try to change your code to:
h1 {
font-family: 'Roboto', sans-serif;
color:blue;
}
or add the class "h1" to your heading.
For reference on css selectors check out https://www.w3schools.com/cssref/css_selectors.asp
Remove this line from stylesheet reference and try
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"

padding and colour not applying to body class

I have been trying to apply padding and colour to my body element and it is not applying.
I have been on this and it is not working. I am using live server for my work though, I will apply my code below for review. both the css and the html. it should also be noted that I am using SASS. Thanks
body {
font-family: 'lato', sans-serif;
font-weight: 400;
//font-size: 16px;
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<title>A7A ASSOCIATES LTD</title>
</head>
<body>
<header class="header">
<div class="header__logo-box">
<img src="img/A7A Logo.png" alt="logo" class="header__logo">
</div>
<nav></nav>
</header>
</body>
</html>
Why would you place those CSS rules after the HTML closing tag ?
anyway, here are few solutions:
put the CSS style inside css/style.css file and it shall work.
make sure the path to the CSS file is correct.
clear the browser cache and try again (CTRL+F5 for Firefox, Shift+F5 for chrome)

Html Web site doesn't scroll on android phone but works well on IOS and Desktop

Hello guys I am trying to figure out how to solve this issue: I have a responsive html website that it's working well when open on a desktop browser, but when I open it on mobile it stuck and cannot scroll. Any idea what's wrong?
Thank you
Link: http://smartwork.com.bo/demo/Forrest/index.html
<meta name="author" content="Muhammad Morshed">
<title>Forrest | Mundo Digital</title>
<!-- Mobile Specific Meta
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes, minimal-ui">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon2.png" />
<!-- CSS
================================================== -->
<!-- Fontawesome Icon font -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- bootstrap.min css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Grid Component css -->
<link rel="stylesheet" href="css/component.css">
<!-- Slit Slider css -->
<link rel="stylesheet" href="css/slit-slider.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/main.css">
<!-- Media Queries -->
<link rel="stylesheet" href="css/media-queries.css">
Css Code
body {
background-color: #2B2C30;
font-family: 'Ubuntu', 'Arial', sans-serif;
line-height: 1.5;
color: #ddd;
}
Finally I solved the issue with the following code before the body.
html,
body {
margin:0;
padding:0;
height:100%;
overflow:visible;
}
body {
background-color: #2B2C30;
font-family: 'Ubuntu', 'Arial', sans-serif;
line-height: 1.5;
color: #ddd;
overflow: a;
}
Hope it helps you guys if you find the same code error.

Why is my background-color not working in Chrome?

The background-color CSS property in Chrome is not working when I implement it into the body. However, when I test it in CodePen, the body's background color changes accordingly. Here is the link to the CodePen code: https://codepen.io/Ag_Yog/pen/rzezYw.
Here is the code that does not work in notepad:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
CSS:
html, body {
width: 100%;
height: 100%;
background-color: #00e676 ;
}
.quoteCard{
background-color: #fff176;
}
.text{
position: relative;
vertical-align:middle;
font-family: 'Acme', sans-serif;
font-size: 30px;
padding: 20px 20px 20px 20px;
}
When inspecting the code on Google Chrome, it shows that there is no background-color, even though I specified it in the CSS:
Bootstrap's background color is overwriting your main.css so the background-color property is taken from the bootstrap css file. Change the order of your css files.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
</html>
This will work
On codepen the body is already responsive, whereas your Chrome's page needs to be made responsive to react to the % of your CSS Properties.
Add these meta tags-
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta name="viewport"content="height=device-height, initial-scale=1.0">
</head>
Now your webpage can detect the devices width and height and set the style attributes according to them.
However, if this still doesn't work. Change your height properties value from 100% to something specific with px or use em if you want it to be responsive with different devices DPR.
I found I was having the same issue when using all of the CSS code for the body tag. I removed the background-color tag from that grouping and put it into a separate grouping for the same tag and everything worked as intended. It's an organizational problem, but it is functional.
Here's the example from my code (This is in my main.css file):
<style>
body {
font-family: Trebuchet MS;
margin-left: autopx;
margin-right: autopx;
margin-bottom: autopx;
margin-top: autopx;
}
body {background-color: #242424;}
</style>