I wan to set Barlow and Fraunces in my CSS. But every time i try to import and use that font family, there doesn't seem to be any changes and font still seems to be Times New Roman.
I tried this
#import url(https://fonts.google.com/specimen/Barlow);
body{
font-family: 'Barlow';
}
That's because you have to include your font-weight and font-style properties in your CSS code:
#import url('https://fonts.googleapis.com/css2?family=Barlow:wght#400;700&display=swap');
body{
font-family: 'Barlow', sans-serif;
font-weight: 400;
font-style: normal;
}
You can try this
<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:wght#100&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Barlow', sans-serif;
}
</style>
Related
I am creating a personal website in html and am trying to add a background image to the "index.html" page. I have pasted my the index.html and style.css code below:
HTML File:
<!DOCTYPE html>
<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=EB+Garamond:ital#0;1&display=swap" rel="stylesheet">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Jack Hanel</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
Gallery
Education
<h1>Hello, I'm Jack Hanel</h1>
<img src="Photos/headshot.jpeg" height="257" width="207">
<p>Age: {age}</p>
<p>Date of Birth: 08/30/1998</p>
<p>Gender: Male</p>
<p>Height: 5'10"</p>
<p>Weight: 165 lbs</p>
<p>Born: Phoenix, AZ</p>
<p>Raised: Greenville, SC</p>
<p>Current Location: Charlotte, NC</p>
LinkedIn
Twitter
Instagram
Replit
</body>
</html>
CSS File:
<style>
body {
background-image: url(Photos/AbstractWallpaper.png);
}
h1 {
font-family: 'EB Garamond', serif;
font-size: 28px;
}
a {
font-family: 'EB Garamond', serif;
background-color: lightgrey;
padding: 4px
}
p {
font-family: 'EB Garamond', serif;
font-size: 18px;
background-color: lightgrey;
padding: 4px
}
img {
margin: 4px
}
</style>
I've added the same background-image code line to the h1 tag, and it applies, although only showing the very top of the image. So I know the background-image code itself isn't the problem. Please help! Also, any other general advice is appreciated, I am brand new to HTML and CSS.
Thank You
I've tried adding the background-image element to the h1 tag, and it worked, although it only showed the very top of the image. But when I apply this line of code to the body tag, nothing appears.
When I import the Nunito sans from google fonts and set different font weights to different paragraphs they all get the same font weight for some reason. It works with other fonts how can I make it work with Nunito sans?
This is the code for a minimal reproducible example:
p {
font-family: 'Nunito Sans', sans-serif;
font-size: 32px;
}
.p1 {
font-weight: 300;
}
.p2 {
font-weight: 600;
}
.p3 {
font-weight: 800;
}
<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=Nunito+Sans:ital,wght#0,600;0,800;1,300&display=swap" rel="stylesheet">
<p class="p1">should be light (300)</p>
<p class="p2">should be semibold (600)</p>
<p class="p3">should be extrabold (800)</p>
Here's a Codepen that shows the problem: https://codepen.io/sofusl/pen/eYVyPVJ
Remove ital from your font-family link. Not sure how that got there when you were setting it up but it's likely why you're getting the undesired results.
p {
font-family: 'Nunito Sans', sans-serif;
font-size: 32px;
}
.p1 {
font-weight: 300;
}
.p2 {
font-weight: 600;
}
.p3 {
font-weight: 800;
}
<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=Nunito+Sans:wght#0,600;0,800;1,300&display=swap" rel="stylesheet">
<p class="p1">should be light (300)</p>
<p class="p2">should be semibold (600)</p>
<p class="p3">should be extrabold (800)</p>
I'm using Playfair Display (Google Font) in one of my pages.
This is how number show in the page. They're all unaligned. Below is the picture.
Below is the picture of Aligned Fonts of the same Google Font. (I have taken the pic from Figma, there was a option for changing font style in Figma) I have to make my fonts look like this, how do I do that?
You can fix this by adding CSS instructing the browser to use the lining-figures.
Read more here
body {
font-family: 'Playfair Display', serif;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum";
}
<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=Playfair+Display&display=swap" rel="stylesheet">
123456789
Please try this!
h1, p {
font-family: 'Playfair Display', serif;
font-feature-settings: "lnum";
}
.number {
background: #55bd55;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
font-size: 25px;
height: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</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=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<h1>Sample Header</h1>
<p class="number">123456789</p>
</body>
</html>
I am trying to import a Google font 'Almarai' to my HTML code but it doesn't work. I tried both link and import methods:
Link method:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght#300&display=swap" rel="stylesheet">
CSS method:
#import url('https://fonts.googleapis.com/css2?family=Almarai:wght#300&display=swap');
Body CSS method:
#import url('https://fonts.googleapis.com/css2?family=Almarai:wght#300&display=swap');
body{
background: $(body.background);
background-color: $(body.background.color);
font-family: 'Almarai', sans-serif;
font-size: 14px;
color: $(body.text.color);
font-weight: 400;
line-height: 1.4em;
word-wrap: break-word;
margin: 0;
padding: 0
}
It works but not with Arabic text.I can't keep the default font for Arabic text because it doesn't look good at all.
can you try bu adding this link
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&family=Almarai:wght#300&display=swap" rel="stylesheet">
css rule
font-family: 'Akaya Telivigala', cursive;
font-family: 'Almarai', sans-serif;
here is the google font]link
https://fonts.google.com/specimen/Almarai?preview.text_type=custom&selection.family=Akaya+Telivigala|Almarai:wght#300&query=Almarai&sidebar.open=true
is it not worked change & to & in the link
I am currently working on developing an HTML and I am using Bootstrap to make it more mobile-friendly. However, the bootstrap font sucks and I am looking to override it and replace it with a better looking font. I am posting the head of my HTML file. It looks like this:
<head>
<title> Connotate Engineering </title>
<meta name=viewport content='width=700'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
And this is what my CSS looks like:
body{
font-family: 'Arial';
font-size: 12px;
}
#images{
font-family: 'Arial';
text-align:left;
font-style: regular;
letter-spacing: 0;
line-height: 1.5em;
text-decoration: none;
word-spacing: 0;
}
#images a{
margin:0px 20px;
display:inline-block;
height: 100%;
text-decoration:none;
color:black;
font-family: 'Arial', serif;
}
.caption {
width: 200px;
text-align: center;
}
#media screen and (max-width:480px) {
#sidebar { display: none;}
}
Change the link positions in your <head> from this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
To this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
The order matters, you want your final changes to be below all others.
And as Arham pointed out, if you put in an inline style, it will have a higher priority than the bootstrap.
If you want the whole page to have that font then you should either remove all font rules in all elements then add body { font-family: 'Indie Flower', cursive; } or include all elements you want to have that font like:
body, #images, #images a {
font-family: 'Indie Flower', cursive;
}
One way is to add the style attributes within the desired tag itself.
ie: (you want to override a certain style on a div)
<div style = "font-family: Arial">