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';
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 />
Does anyone know how to preload typekit font? Right now my computed font is Ariel and I get the error:
The resource https://use.typekit.net/dwg7avv.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The font works if I do a normal import.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font</title>
<style>
body {
font-family: proxima-nova, sans-serif;
font-style: normal;
font-weight: 100;
}
</style>
<link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style" crossorigin>
</head>
<body>
This is my font.
</body>
</html>
Short answer, you have to load the stylesheet at the end of your head element.
For explanation why, you can check out the documentation from mozilla https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
So with your example it should be like:
<head>
<link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style">
<link rel="preload" href="main.js" as="script">
...
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css">
</head>
I've just faced exactly the same problem, and I did solve with this structure
<!-- https://use.typekit.net & https://p.typekit.net is the font file origin (Lighthouse required both links from Adobe) -->
<!-- It may not have the same origin as the CSS file (https://use.typekit.net/pgd3inh.css) -->
<link rel="preconnect" href="https://use.typekit.net" crossorigin />
<link rel="preconnect" href="https://p.typekit.net" crossorigin />
<!-- We use the full link to the CSS file in the rest of the tags -->
<link rel="preload" as="style" href="https://use.typekit.net/dwg7avv.css" />
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css" media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css" />
</noscript>
This article helps me to solve it and know why
It's a bug, I had the same problem and i'm now giving up:
https://bugs.chromium.org/p/chromium/issues/detail?id=593267
Funny is, the only reason I tried to use preload, was of the chrome lighthouse test that recommendet it to me.
And here the picture of it kinda preload but not actualy working!
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">
This is my first attempt at writing some LESS css code and I can't seem to get it to compile. I'm sure I'll be missing something simple but I can seem to find what it is.
My Styles are declared as follows:
<!--Styles & JS-->
<link href='https://fonts.googleapis.com/css?family=Sniglet' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/theme.less" rel="stylesheet/less" type="text/css"/>
And my LESS file looks like this:
//Theme Colours
#headingcolor: #212d43;
#accentcolor: #005bc4;
#textcolor: #FFF;
#footercolor: #0856a1;
//Theme Fonts
#font: 'Sniglet', cursive;
//Theme Sizes (1980)
#mainfont: 12px;
#h1: #mainfont + 6;
#h2: #mainfont - 1;
#footerlinks: #mainfont - 2;
//Styles
header {
background: #headingcolor;
color: #textcolor;
font: #font #mainfont;
padding:10px 36px 15px 36px;
}
Try to load your stylesheet before the js. With your theme.less, the following code is working:
<body>
<link href="css/theme.less" rel="stylesheet/less" type="text/css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<header></header>
</body>
If everything is working, you should find in your browser console some messages like:
less.min.js:13 rendered http://localhost:8000/theme.less successfully.
less.min.js:13 css for http://localhost:8000/theme.less generated in 19ms
less.min.js:13 less has finished. css generated in 20ms
I need some help diagnosing a CSS problem in Chrome. I'm not even sure how to diagnose this issue. I'm just wondering what the next steps should be.
As far as solutions go, I have checked this question but it's not very clear. I have also tried this solution (disabling all styles and then enabling one) but it's not working. I don't think this question applies because we're not pulling from external domains so it's not a cross-domain issue.
The problem:
It appears that Chrome is ignoring our alternate stylesheet definitions. In our application we use alternate stylesheets and a Javascript routine to change the background color. This code was working, and is still working in Firefox and IE, but at some point it stopped working in Chrome. The stylesheets are defined like this:
<link type="text/css" rel="stylesheet" title="white" property="stylesheet" href="/myapp/css/layer.css" />
<link type="text/css" rel="alternate stylesheet" title="silver" property="stylesheet" href="/myapp/css/medium.css" />
<link type="text/css" rel="alternate stylesheet" title="grey" property="stylesheet" href="/myapp/css/dark.css" />
<link type="text/css" rel="alternate stylesheet" title="beige" property="stylesheet" href="/myapp/css/beige.css" />
<link type="text/css" rel="alternate stylesheet" title="green" property="stylesheet" href="/myapp/css/green.css" />
The original body definition here:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #282828;
height: 100%;
background: #fff url(../images/header-bg.jpg) center top no-repeat;
min-width: 1024px;
}
is supposed to be overridden with (for example) this, in one of the alternate stylesheets:
body {
background: url("../images/header-bg-dark.jpg") no-repeat center top #919194;
}
But this is not working in Chrome. I've tried the following:
1) Traced through the JS code and verified that the CSS sheets are getting enabled/disabled correctly:
if (document.styleSheets.item(i).href.indexOf("medium") > -1) {
document.styleSheets.item(i).disabled = false;
} else if (document.styleSheets.item(i).href.indexOf("dark") > -1
|| document.styleSheets.item(i).href.indexOf("beige") > -1
|| document.styleSheets.item(i).href.indexOf("green") > -1) {
document.styleSheets.item(i).disabled = true;
}
2) Looked at the computed styles, and only the base style is showing - it's like Chrome is ignoring the other styles.
3) Tried removing alternate from the rel="alternate stylesheet" part of the definitions.
4) Tried removing the title from the base definition (layer.css).
Anyone have any other ideas? If I find a solution I'll post it.
The answer turned out to be removing the "title" attribute AND removing the "alternate" part of the stylesheet definition. So the stylesheets are now linked like this:
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/medium.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/dark.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/beige.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/green.css"/>" />
No idea why the original definitions didn't work but the new ones work and can be turned on and off with JS, which is what we needed.