HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="font-family: 'Noto Sans', sans-serif;"">Test</h1>
<h1 style="font-family: 'Roboto', sans-serif;">Test</h1></h2>
</body>
</html>
CSS:
<style>
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto:wght#700&display=swap');
</style>
I'm trying to import this font, however for both and , the font doesn't show up. How do I fix this?
There is an extra quotation mark in your code.
Replace
<h1 style="font-family: 'Noto Sans', sans-serif;"">Test</h1>
With
<h1 style="font-family: 'Noto Sans', sans-serif;">Test</h1>
I would, however, not write inline CSS to style my fonts because of readability and ease of maintenance.
Try this instead,
In your HTML file, do this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="style.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=Noto+Sans&family=Roboto:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="header-style-1">Test</h1>
<h1 style="header-style-2">Test</h1></h2>
</body>
</html>
In a separate CSS file (in this case, style.css), do this.
.header-style-1 {
font-family: 'Noto Sans', sans-serif;
}
.header-style-2 {
font-family: 'Roboto', sans-serif;
}
First You Should remove '"'
<h1 style="font-family: 'Noto Sans', sans-serif;"">Test</h1>
change this
<h1 style="font-family: 'Noto Sans', sans-serif;">Test</h1>
next you can help this-->https://www.w3docs.com/snippets/css/how-to-import-google-fonts-in-css-file.html#:~:text=Open%20Google%20Fonts%20and%20follow,(in%20HTML%20or%20CSS).
In the head of your html file, write this line
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto:wght#700&display=swap"
rel="stylesheet"
/>
you can use below code for fix error
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Related
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.
<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
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>
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)
I use the 'Lato' font on the website. The characters in Polish and English are displayed correctly, while some Czech characters are bolded. Below you can see that these 3 characters are bolded. What is the reason of this problem? Is this a font or browser problem?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900&subset=latin,latin-ext" rel="stylesheet">
<style>
body {
font: normal 15px 'Lato';
color: #000000;
font-weight: 300;
}
</style>
</head>
<body>
<div style="font-size: 30px;">Pověřenec pro ochranu osobních údajů</div>
</body>
</html>
Additonal printscreen
The glyphs are not available in Lato 1.0, which is also still used by Google Fonts.
Use Adobe Typekit, or download the font and include it on your website to fix the missing (bold) characters.
Font can be found here
Removing the font size from the body css works fine:
<html>
<head>
<title>TODO supply a title</title>
<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,100i,300,300i,400,400i,700,700i,900,900i&subset=latin-ext" rel="stylesheet">
<style>
body {
font: normal 'Lato';
color: #000000;
font-weight: 300;
}
</style>
</head>
<body>
<div style="font-size: 30px;">Pověřenec pro ochranu osobních údajů</div>
</body>
</html>