I created a simple article page that uses the Google font, Montserrat for the article's main title. I set the font weight to 700 to make the title appear bold but when displayed on the page, it doesn't appear nearly as bold as it should (compared to the font reference). Here's a link to the sample page I made that illustrates the problem:
https://www.juicehouse.org/ohio-brain-drain.html
I think you are using an outdated format on your link to import the font, as I see in the example you are using the following:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat: 700, 900">
But now the way to specify the weight is different:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#700;900&display=swap" rel="stylesheet">
Live demo:
.w700{
font-family: 'Montserrat';
font-weight: 700;
}
.w900{
font-family: 'Montserrat';
font-weight: 900;
}
<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#400;700;900&display=swap" rel="stylesheet">
<p class="w700">font-weight: 700</p>
<p class="w900">font-weight: 900</p>
Related
I've gone over the posts related to this question (here, here and here) and tried various things. However, I'm still getting the warnings on Windows 10 in Firefox and Firefox Developer Edition (but in neither Edge, nor Chrome).
The warnings I get are per font variant, and occur after about 10 seconds:
The resource at “(url)/test/roboto-light-webfont.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
The resource at “(url)/test/roboto-regular-webfont.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
The resource at “(url)/test/roboto-medium-webfont.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
I'm self-hosting the Google font "Robot" on a test web page.
The folder structure and markup/css are very simple:
test/
index.html
roboto.css
roboto-light-webfont.woff
roboto-light-webfont.woff2
roboto-regular-webfont.woff2
roboto-regular-webfont.woff
roboto-medium-webfont.woff2
roboto-medium-webfont.woff
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="preload"
href="roboto-light-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="roboto-regular-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="roboto-medium-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<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>Roboto</title>
<link rel="stylesheet" href="roboto.css" />
</head>
<body>
<h1>Roboto (medium: 500)</h1>
<ul>
<li>Roboto (regular: 400)</li>
</ul>
<p>Roboto (light: 300)</p>
</body>
</html>
CSS:
#font-face {
font-family: "Roboto";
font-weight: 300;
src: url("roboto-light-webfont.woff2") format("woff2"), url("roboto-light-webfont.woff") format("woff");
}
/** Regular: 400 **/
#font-face {
font-family: "Roboto";
font-weight: 400;
src: url("roboto-regular-webfont.woff2") format("woff2"), url("roboto-regular-webfont.woff") format("woff");
}
/** Medium: 500 **/
#font-face {
font-family: "Roboto";
font-weight: 500;
src: url("roboto-medium-webfont.woff2") format("woff2"), url("roboto-medium-webfont.woff") format("woff");
}
h1 {
font-family: "Roboto", serif;
font-weight: 500;
}
li {
font-family: "Roboto", serif;
font-weight: 400;
}
p {
font-family: "Roboto", serif;
font-weight: 300;
}
Ernesto in this post suggested that adding link rel="stylesheet", etc after each preload would eliminate the warning:
<link
rel="preload"
href="roboto-light-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="roboto-light-webfont.woff2"
type="font/woff2"
/>
<link
rel="preload"
href="roboto-regular-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="roboto-regular-webfont.woff2"
type="font/woff2"
/>
<link
rel="preload"
href="roboto-medium-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="roboto-medium-webfont.woff2"
type="font/woff2"
/>
But I got the same warnings.
Can anyone see any problems with the way I'm preloading the fonts?
This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 2 months ago.
I started learning CSS a few weeks ago and I am trying to use a font I found on Google Fonts. I'm unsure of what was wrong with my code even after I asked a few friends. (Note: I tried Chrome and Edge, but none work) Here's the HTML section that has the font and that refers to the CSS sheet :
header {
background-color: #4d4d4d;
color: #FFFFFF;
font-size: 5%;
font-family: 'Alata', sans-serif;
}
<!-- Font Alata https://fonts.google.com/specimen/Alata -->
<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=ABeeZee&display=swap" rel="stylesheet"/>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
<link
<a href="link to homepage">
<img src="link to image" />
</a>
</header>
I'd be glad to know what's wrong here. Thanks in advance!
I tried using a Google Font using a CSS sheet, but the font does not render
You are requesting the font ABeeZee but you define Atlanta in your CSS. These values have to match if you want to use the font
header {
font-family: 'ABeeZee', sans-serif;
}
<!-- Font Alata https://fonts.google.com/specimen/Alata -->
<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=ABeeZee&display=swap" rel="stylesheet"/>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
</header>
you have a font problem you are requesting ABeeZee
font but in style sheet you are appling font Alata
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<body>
<style> header {
background-color: #4d4d4d;
color: #FFFFFF;
font-size: 5%;
font-family: 'Alata', sans-serif;
font-family: 'Alata', sans-serif;
}</style>
<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=Alata&display=swap" rel="stylesheet">
<style> #import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); </style>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
<link
<a href="link to homepage">
<img src="link to image" />
</a>
</header>
</body>
</html>
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.
I have an assignment in university which revolves around not editing anything in the HTML-code and only the CSS-code.
I see that my teacher has used the <link> element with something regarding fonts. I just want to make sure if I can use anything from that element to apply a font to the webpage through #font-face. He has not attached any .OTF files it is therefore that I am asking.
The code:
<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+Condensed:wght#300&family=Barlow+Semi+Condensed:wght#300;700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Bungee+Shade&display=swap"
rel="stylesheet">
If those link elements are in the HTML you have been given then you can just use those fonts in your CSS without doing anything further.
Here's a simple example using one of the Bungee fonts:
body {
font-family: 'Bungee Outline', sans-serif;
font-size: 36px;
}
<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=Barlow+Condensed:wght#300&family=Barlow+Semi+Condensed:wght#300;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Bungee+Shade&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
</head>
<body>
<div>Some non-alterable HTML</div>
</body>
</html>
so i just activated ssl for my website and i noticed that the font changed. It went from League Sparton Bold to something slightly different. It is not exactly what i desire. Here is what i wrote in css
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://allfont.net/allfont.css?fonts=league-spartan" rel="stylesheet" type="text/css" /><head>
<script src="jquery-3.5.1.min.js"></script>
</head>
<style>
body,h1,h2,h3,h4,h5,h6 { font-family: 'League Spartan Bold', arial; }
body, html {
height: 100%;
color: #777;
line-height: 1.8;
min-width: 100%;
}
</style>
here is what it looks like with http, which is also what i want for https:
and this is what it looks like in https,
The problem comes from the CSS file which has been linked to by
<link href="https://allfont.net/allfont.css?fonts=league-spartan" rel="stylesheet" type="text/css" />
Although the actual linking is requested using https, if you look within the file you will see it has:
#font-face{font-family:league spartan bold;font-style:normal;font-weight:700;src:local('League Spartan Bold'),local('LeagueSpartan-Bold'),url(http://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.woff) format('woff'),url(http://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.ttf) format('truetype')}
and so if the font isn't local, it tries to get it from allfont.de but with http
One way of getting over this problem would be to put this code direct into style in your header, altering the two http to https so you aren't dependent on allfont's text.
#font-face{font-family:league spartan bold;font-style:normal;font-weight:700;src:local('League Spartan Bold'),local('LeagueSpartan-Bold'),url(https://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.woff) format('woff'),url(https://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.ttf) format('truetype')}
Embed or import the font from somewhere you can also download the font then use #font-face to import it in your site like this:
#font-face {
font-family: 'League Spartan Bold'; // You can use any name
src: url(fonts/thefont.ttf) format('TTF') // The path of the font file
// You can use many formats like TTF, OTF, WOFF
}
So, by this way you can host your own font and don't need to be depended on a third party service (which can be down any time).