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>
Related
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>
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 have problem with proper font rendering in html and wkhtmltopdf. I am using Muli font in the whole body (download from Google: https://fonts.google.com/specimen/Muli), but some parts are cut out (image below where zeros are not well rounded). I do not see the same effect with Roboto or Montserrat. Here is my code:
<html>
<head>
<style>
body {
font-family: 'Muli', sans-serif;
}
.thin {
font-weight: 200;
}
.light {
font-weight: 300;
}
.regular {
font-weight: 400;
}
.bold {
font-weight: 600;
}
.extraBold {
font-weight: 700;
}
.black {
font-weight: 800;
}
.extraBlack {
font-weight: 900;
}
</style>
</head>
wkhtmltopdf -L 0 -R 0 -T 0 -B 0 --page-width 2933px --page-height 5194px --disable-smart-shrinking
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
body {
font-family: 'Muli', sans-serif;
}
h1 {
font-size: 110px;
font-weight: 900;
color: #00b3b8;
}
h2 {
font-size: 110px;
font-weight: 700;
color: #001fb8;
}
h3 {
font-size: 110px;
font-weight: 600;
color: #b88800;
}
h4 {
font-size: 110px;
font-weight: 400;
color: #b82a00;
}
h5 {
font-size: 110px;
font-weight: 300;
color: #ad00b8;
}
h6 {
font-size: 110px;
font-weight: 200;
color: #000000;
}
</style>
</head>
<body>
<h1>100</h1>
<h2>200</h2>
<h3>300</h3>
<h4>400</h4>
<h5>500</h5>
<h6>600</h6>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
There are a couple of things that could be causing issues. Or possibly a combination of serveral.
Make sure you're specifying font sizes in pt or em NOT px. The reason for this is kerning tables (usually built into the font) combine with font-smoothing and converting pixel to print sizes can cause artifacts.
In the past I've experienced the Google Font downloaded to my computer was physically different than what is streamed via javascript from the service. I assume they don't get updated at the same time. If you can try letting Google's server provide the font each time. Or can you try finding the files elsewhere? (this sounds like a corrupted font file)
If you are self-hosting the fonts, make sure that your server is sending them with the correct MIME type. Here's a list of what they should be. You can change that in IIS or your .htaccess file depending on the server environment you have. I know this seems strange since it's only one font, but the other's you've tried could be loading a different font type (ttf, otf, etc) that what the browser is getting for Muli
If none of that helps could you post more of you're CSS including how the fonts are loaded and how they're set to display (size, smoothing, line-height, etc)?
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">