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>
Related
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);
}
<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
I have a test site that I'm making it doesn't use the imported font or the backup font. The strange thing is that while it doesn't change the font locally, putting the code into codepen works just fine.
In case you're wondering, I have all of my files in the right places (see image)
Also, here's the codepen link for my source code and it's also here below:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="description" content="Test Page" />
<meta name="author" content="test Page" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" ref="stylesheet">
</head>
<body>
<section id="hero">
<div class="hero container"></div>
<div>
<h1>Test Header</h1>
Test Button
</section>
<script src="main.js"></script>
</body>
<html>
Its rel not ref for linking stylesheet
<link href="style.css" rel="stylesheet">
This question has been asked a million times, and i have followed the answers but it still doesnt work. what am i doing wrong?
I have in the head
<meta content="width=device-width, initial-scale=1" name="viewport" />
and here is the intial css
.navbar-nav{
float:right;
font-family: 'Playfair Display', serif;
}
here is the media query:
#media only screen and (max-width: 800px) {
.navbar-nav{
float:right;
font-family: 'Playfair Display', serif;
font-size: 50px;
}
}
i added the font size so i can visually identify if it works, but id doesnt. what am i doing wrong?
here is my head:
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>Stuff</title>
<meta name="description" content="Simplified Bootstrap template with sticky menu">
<link href="css/main.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Knewave|Merriweather|Playfair+Display" rel="stylesheet">
<link href="css/sticky-menu.css" rel="stylesheet">
<script src="js/form.js"></script>
If your display's width is larger than 800px, your media query wouldn't match.
Try verifying by setting the max-width to a very large number like 10000 and you'll likely see the changes applied.
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>