I can't get my Google Font API to bring up the font I'm selecting. Got the links straight from Google, CSS seems right, but no joy. Am I doing something wrong?
HTML:
h1 {
font-family: "Montserrat", sans-serif;
size: 3rem;
line-height: 1.5;
font-weight: 900;
}
title {
font-family: "Ubuntu", sans-serif;
size: 1rem;
font-weight: 300;
}
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<!-- Google Font API -->
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;700;900&family=Ubuntu:wght#300;400;700&display=swap" rel="stylesheet">
<style> #import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;700;900&family=Ubuntu:wght#300;400;700&display=swap'); </style>
<!-- CSS Connection -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Heading H1</h1>
</body>
</html>
Tried changing the quotations from " to ' and even `. Tried changing the name of the font to Montserrat-black, tried all sorts of solutions around the internet.
Related
This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 2 months ago.
I started learning CSS a few weeks ago and I am trying to use a font I found on Google Fonts. I'm unsure of what was wrong with my code even after I asked a few friends. (Note: I tried Chrome and Edge, but none work) Here's the HTML section that has the font and that refers to the CSS sheet :
header {
background-color: #4d4d4d;
color: #FFFFFF;
font-size: 5%;
font-family: 'Alata', sans-serif;
}
<!-- Font Alata https://fonts.google.com/specimen/Alata -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=ABeeZee&display=swap" rel="stylesheet"/>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
<link
<a href="link to homepage">
<img src="link to image" />
</a>
</header>
I'd be glad to know what's wrong here. Thanks in advance!
I tried using a Google Font using a CSS sheet, but the font does not render
You are requesting the font ABeeZee but you define Atlanta in your CSS. These values have to match if you want to use the font
header {
font-family: 'ABeeZee', sans-serif;
}
<!-- Font Alata https://fonts.google.com/specimen/Alata -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=ABeeZee&display=swap" rel="stylesheet"/>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
</header>
you have a font problem you are requesting ABeeZee
font but in style sheet you are appling font Alata
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<body>
<style> header {
background-color: #4d4d4d;
color: #FFFFFF;
font-size: 5%;
font-family: 'Alata', sans-serif;
font-family: 'Alata', sans-serif;
}</style>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
<style> #import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); </style>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
<link
<a href="link to homepage">
<img src="link to image" />
</a>
</header>
</body>
</html>
<p font-family = "">John Smith <p>
I want the above to look like a handwritten signature any font that are in cursive for HTML that work?
Using google fonts (https://fonts.google.com/specimen/Great+Vibes). You can use any font by changing the links from the header.
index.html
<!DOCTYPE html>
<html onload="print()" lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cars</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body >
<p class="handwritten">John Smith <p>
</body>
</html>
style.css
.handwritten {
font-family: Great Vibes;
font-size: 30px;
}
I recommend you to look for a source at: https://fonts.google.com/
then follow the instructions to use it, in your css you need a font-family: 'font-name', type;
I leave you an example of use:
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
<style>
.p1 {
font-family: 'Cedarville Cursive', cursive;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
additionally I recommend you to read the complete css documentation: https://www.w3schools.com/css/css_font.asp
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>
The font size of 'Flavoroso' doesn't change for any value of font-size. Can anyone help me fix this please?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<div class="container align-items-center d-flex h-100">
<header class="text-center col-12">
<h1>Flavoroso</h1>
</header>
</div>
</body>
</html>
CSS
h1 {
background-color: rgb(167, 166, 165, 0.5);
font-family: "Dancing Script", cursive;
font-style: italic;
font-size: 7rem;
color: rgb(29 28 28);
}
In the head tag, try linking first bootstrap then the google font and then your css file. The order matters a lot, always link css last.
Your code should be like this.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
h1 {
background-color: rgb(167, 166, 165, 0.5);
font-family: "Dancing Script", cursive;
font-style: italic;
font-size: 7rem;
color: rgb(29 28 28);
}
</style>
</head>
<body>
<div class="container align-items-center d-flex h-100">
<header class="text-center col-12">
<h1>Flavoroso</h1>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
</body>
</html>
Let me know if this will work for you.
your code seems to be fine . problem may due to improper css import. Use this instead.
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<style>
h1 {
background-color: rgb(167, 166, 165, 0.5);
font-family: "Dancing Script", cursive;
font-style: italic;
font-size: 3rem;
color: rgb(29 28 28);
}
</style>
</head>
<body>
<div class="container align-items-center d-flex h-100">
<header class="text-center col-12">
<h1>Flavoroso</h1>
</header>
</div>
</body>
</html>
I believe there is a conflict between bootstrap and your local styles. You could add a class attribute to your heading tag and use the class name to style (in order to increase the specificity).
Code Example
/*overriding bootstrap style by using a class name*/
.anyClassName {
background-color: rgb(167, 166, 165, 0.5);
font-family: "Dancing Script", cursive;
font-style: italic;
font-size: 7rem;
color: rgb(29 28 28);
font-size: 7rem;
}
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<div class="container align-items-center d-flex h-100">
<header class="text-center col-12">
<!-- Adding class name of your preference here -->
<h1 class="anyClassName">Flavoroso</h1>
</header>
</div>
</body>
</html>
I can't get the Roboto font to work in my HTML file. If I understand correctly, Google's instruction are:
"Copy these lines into your head tag":
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap" rel="stylesheet">
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap" rel="stylesheet">
</head>
<body>
<h3>This is a heading</h3>
<p>This is a string.</p>
</body>
</html>
Instead of the Roboto font, the website shows the standard font:
add this before </head>
<style>
body {
font-family: "Roboto", sans-serif;
}
</style>
You did not use font family in css, use like this
<style>
body, h1,h2,h3,h4,h5,h6,p {
font-family: "Roboto", sans-serif;
}
</style>