How do you use Google Fonts in a CSS stylesheet? [duplicate] - html

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>

Related

Issue with Google Font API

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.

Linking fonts to #font-face through HTML?

I have an assignment in university which revolves around not editing anything in the HTML-code and only the CSS-code.
I see that my teacher has used the <link> element with something regarding fonts. I just want to make sure if I can use anything from that element to apply a font to the webpage through #font-face. He has not attached any .OTF files it is therefore that I am asking.
The code:
<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=Barlow+Condensed:wght#300&family=Barlow+Semi+Condensed:wght#300;700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Bungee+Shade&display=swap"
rel="stylesheet">
If those link elements are in the HTML you have been given then you can just use those fonts in your CSS without doing anything further.
Here's a simple example using one of the Bungee fonts:
body {
font-family: 'Bungee Outline', sans-serif;
font-size: 36px;
}
<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=Barlow+Condensed:wght#300&family=Barlow+Semi+Condensed:wght#300;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Bungee+Shade&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
</head>
<body>
<div>Some non-alterable HTML</div>
</body>
</html>

How have a cursive font in HTML, I want it to look handwritten?

<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

how to specify which font to use in googlefonts with css [duplicate]

This question already has answers here:
Specifying Style and Weight for Google Fonts
(7 answers)
Closed last year.
i have imported two fonts in my website Montserrat Extra-light 200 and Montserrat Medium 500 but when i type
font-family: 'Montserrat Extra-light 200', sans-serif;
it apllies the Montserrat Medium 500 font but i want to apply the Montserrat Extra-light 200
but there i an another text which shout use Montserrat Medium 500 so i cant remove one font
so is there any way which Montserrat to use in a specific text
here is my html and css code
#section1_text1 {
font-family: "Montserrat", sans-serif;
}
#section1_text2 {
font-family: "Montserrat", sans-serif;
}
<!DOCTYPE html>
<html 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">
<link rel="stylesheet" href="/test/styles.css">
<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#200;400&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<main>
<div id="section1">
<h3 id="section1_text1">Almost before we knew it, we had left the ground.</h3>
<h2 id="section1_text2">Agile Way Of Development</h2>
</div>
</main>
</body>
</html>
so i want to specify which font to use at a specifec text
Your HTML and CSS is correct. You only need to add the font-weight to make sure you can use specific font weight for your chosen font.
styles.css
#section1_text1 {
font-family: "Montserrat", sans-serif;
font-weight: 200;
}
#section1_text2 {
font-family: "Montserrat", sans-serif;
font-weight: 400;
}
HTML
<!DOCTYPE html>
<html 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">
<link rel="stylesheet" href="/test/styles.css">
<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#200;400&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<main>
<div id="section1">
<h3 id="section1_text1">Almost before we knew it, we had left the ground.</h3>
<h2 id="section1_text2">Agile Way Of Development</h2>
</div>
</main>
</body>
</html>

How to import Google Fonts to HTML/CSS?

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>