If I run the code below, the Josefine Sans font weight 400 looks bolder than weight 600. Can anyone explain why this is happening?
body {
font-family: 'Josefin Sans', sans-serif;
font-size: 24px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,600" rel="stylesheet">
</head>
<body>
<p style="font-weight:400;">The spectacle before us was indeed sublime.</p>
<p style="font-weight:600;">The spectacle before us was indeed sublime.</p>
</body>
</html>
In my browser the 400 is lighter than the 600, so this might be computer specific.
The most likely reason is that you have installed a faulty or incomplete version of the webfont locally/on your computer.
Related
I want to prioritze the download of the webfont and tried this, according to https://leerob.io/blog/fonts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="preload" href="https://leerob.io/fonts/inter-var-latin.woff2" as="font" type="font/woff2" />
<style type="text/css">
#font-face {
font-family: Inter;
font-display: optional;
src: url(https://leerob.io/fonts/inter-var-latin.woff2) format('woff2');
}
body {
font-size: 300%;
font-family: Inter;
}
</style>
</head>
<body>
lorem ipsum.
</body>
</html>
The problem is that the browser downloads the font twice. codepen is here: https://codepen.io/snuup/pen/poPBBLg if you refresh it, and filter the downloads to fonts (since codepen has so many files itself) you see the 2 downloads.
How can I preload the font and avoid 2 downloads?
Weirdly enough, it turns out you need to add the crossorigin property to the link, even when it's on the same site. It doesn't make sense to me either, but it works.
So your tag should be
<link rel="preload" href="https://leerob.io/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin />
I'm trying to use Lato from Google Fonts in my site. I see on fonts.google.com, Lato has distinct font weights, and they are obvious differences:
https://fonts.google.com/specimen/Lato
In practice, I'm not seeing much of a difference between these, which complicates design on my site.
Can anyone tell me if I'm using Lato and font weights properly, or show me how to use the font weights?
https://plnkr.co/Ng6Xk9S3TqGA2xzl7Nne
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:500,600,700,800" rel="stylesheet">
</head>
<style>
body {
font-family: 'Lato', sans-serif
}
</style>
<body>
<div style="font-weight:500">This is a test!</div>
<div style="font-weight:600">This is a test!</div>
<div style="font-weight:700">This is a test!</div>
<div style="font-weight:800">This is a test!</div>
</body>
Thanks to Andrew Li, I realized I was including font-weights for Open Sans, not Lato. Here's a fixed Plunkr:
https://plnkr.co/edit/9mKXYie2BdMvkf3uuvgn
The fix was:
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
I am creating this simple html page... everything seems to work fine. But when I came to link my css to my html. Nothing happens and I made sure I save everything, nothing happens to my webpage. Can you check my code below and see if there is any problems thanks.
HTML:
<html>
<head>
<title>What if?</title>
<meta http-equiv="What if" content="text/html; charset=uft-8"/>
<img src="images/Logo.jpg" height="300" width="400"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<header>
<h1>What if</h1>
</header>
</body>
</html>
My CSS:
body {
font-family : Verdana, Arial, sans-serif;
font-size : medium;
}
h1 {
<center></center>
background-color: #CCCCCC;
color: #000000;
}
Also Don't use <img> tag into <head> section. <img> tag should be in <body> section.
I'm trying to design a web page, for some of the headlines I like to use oswald font, so inserted the following line of code in the <head> under the '':
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic|Oswald:400,700"
media="screen">
but it does not work.
I test the page locally.
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic|Oswald:400,700" media="screen">
<h1 style="font-family: 'Oswald'">It works</h1>
You have to use exactly tha same name of the fonts declared on the google css:
html{
font-family:"Oswald"; // Capitalized Name!!!! :)
font-size:14px;
}
If you visit this link - https://fonts.googleapis.com/css?family=Lora:400,700,400italic|Oswald:400,700-
you´ll notice that they declare font-family: 'Oswald';
I am using custom fonts in my website. I could use a local font file:
src: local('Ubuntu'), url('fonts/ubuntu.woff') format('woff');
or just use google's:
src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
Which would be faster, considering page load time?
I set up a GAE app with two test pages, one using Google Web Fonts and one using a local file. I made sure there was no caching and recorded how long it took each page to load. This was repeated 20 times on Chrome.
Results
Average load time (Google Web Fonts): 486.85 ms
Average load time (Local file): 563.35 ms
Code
fonts-google.html
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link href='both.css' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
fonts-local.html
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link href='fonts-local.css' rel='stylesheet' type='text/css'>
<link href='both.css' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
fonts-local.css
#font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: normal;
src: local('Ubuntu'), url('ubuntu.woff') format('woff');
}
both.css
h1 {
font-family: 'Ubuntu';
}