My website has a low speed problm (I've attached the GTmetrix result)
So, I added following codes in css, head and WP Rocket, but GTmetrix still shows the same google font issues.
Would you please let me know how to fix this problem?
CSS:
html, body, button, input, select, textarea, textfield {
font-size: 100%;
font-family: "Gothic A1", Sans-serif;
font-display: swap;
}
Head:
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="$CSS&display=swap" type="text/css" as="style" />
<link rel="stylesheet" href="$CSS&display=swap" media="print" onload="this.media='all'" />
<link rel="stylesheet" href="googlewebfonturl&display=swap">
<link rel="stylesheet" href="css.css" onload="this.onload=null;this.rel='stylesheet';"/>
<link rel="stylesheet" href="all.css" media="all" >
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="desktop.css" media="screen and (min-device-width: 1024px)">
WP Rocket:
GTmetrix:
Thank you.
Related
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'd like to use the same color as the H2 element for some text in a JSP page. But there are 7 style sheets included in the page, as can be seen from view source:
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<link rel="stylesheet" type="text/css" href="/css/menu.css"/>
<link rel="stylesheet" type="text/css" href="/css/lib/jqModal.css"/>
<link rel="stylesheet" type="text/css" href="/css/en-US/localized.css" />
<link rel="stylesheet" type="text/css" href="/css/lib/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" type="text/css" href="/css/lib/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/css/lib/jquery-ui-theme.css" />
How do I determine which style sheet is used for the H2 element?
As the name says, CSS - Cascades. So wherever the h2 is defined, the browser fetches the rule and applies it to the page. So, let's say we have included a few style-sheets, like how I have done in my application Soceall, which has a lot of plugins CSS than my own.
If you see in the Chrome's Dev Tools Inspector, you could find all the cascading rules for, say, I picked a <h4> here:
It gets from three style-sheets and the line numbers are also displayed:
<link rel="stylesheet" href="/css/fonts.css" />
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.standalone.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.1.1/css/bootstrap-colorpicker.min.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/formvalidation/formvalidation/master/dist/css/formValidation.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.8.0/css/bootstrap-markdown.min.css" />
So, here:
Clicking on the link, which says, style.css:277 will take you to the declaration on style-sheet as well. You can also edit the file and see the changes lively.
Both of my last 2 css pages (800px.css and 800pxland.css) are being neglected in rendering my website on a tablet device. I cannot figure out why, all of the other ones work just fine. As a matter of fact, they worked just hours ago but now no matter what I change and to what degree I change it, nothing works. I just started using Bluehost's CloudFlare service so I'm not sure if that has something to do with it (yes, I am FTP'ing while in dev. mode on CloudFlare). I have been using google chrome as my browser on the tablet the whole time. Ill get the posted p and hopefully it'll help. Thanks!
<head>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon" />
<meta charset="utf-8">
<meta http-equiv="cache-control" content="public">
<meta http-equiv="expires" content="Fri, 30 Dec 2022 12:00:00 GMT">
<title>About EDM Uncovered</title>
<link href="/css/12gs.css" rel="stylesheet" type="text/css">
<link href="/css/reset.css" rel="stylesheet" type="text/css">
<link href="/css/stylesheet.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Jura:400,600,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
<link href="/jquery/jQuery.ui.js" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery/jQuery.js"></script>
<script type="text/javascript" src="/js/protoFluid3.02.js"></script>
<script type="text/javascript" src="/js/unslider.min.js"></script>
<script type="text/javascript" src="/js/jquery.fittext.js"></script>
<script type="text/javascript" src="/js/active.js"></script>
<link media="screen and (max-device-width: 480px)" href="/css/480px.css" rel="stylesheet" type="text/css">
<link media="screen and (max-device-width:600px) and (orientation:landscape)" href="/css/480pxland.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1300px) and (max-device-width: 1399px)" href="/css/1300px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1400px)" href="/css/1400px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width:601px) and (max-device-width:800px) and (orientation:portrait)" href="/css/800px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width:800px) and (max-device-width:1300px) and (orientation:landscape)" href="/css/800pxland.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if lt IE 9]>
<html lang="en" class="ie8">
<link rel="stylesheet" type="text/css" href="/css/ie8-and-down.css" />
<![endif]-->
<!--[if IE 9 ]>
<html lang="en" class="ie9">
<link rel="stylesheet" type="text/css" href="/css/ie9.css" />
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->
</head>
As a matter of fact, they worked just hours ago...
If by this you mean that the 2 ipad CSS stylesheets were working and now they aren't, then to me it's implying either an issue with them being cached via CloudFlare or there's a CSS error on the stylesheets or styles from another stylesheet are taking precedent.
You could test each possibility by
save duplicates of the last 2 stlyesheets and update the HTML accordingly
eg <link media="screen and (min-device-width:601px) and (max-device-width:800px) and (orientation:portrait)" href="/css/800px-alt.css" rel="stylesheet" type="text/css"> . This would rule out a caching issue
validate the last 2 stylesheets # W3 CSS validation
add a new test selector on each of the last 2 stylesheets and see if you can get it to stick, eg body{background-color:green !important;
These are the most likely causes that come to mind for me.
Good luck!
`
I have question why Less Css not working (page without applied stylesheets) on this both browsers? On IE9+ it looks normal like on Chrome, FF and Opera too.
Look on screens:
Source
code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mansion</title>
<link rel="stylesheet" href="/Content/normalize.css" media="all"/>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<link rel="stylesheet/less" href="/Content/siteHD.less" media="screen and (max-width: 1920px)" />
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
<link rel="stylesheet/less" href="/Content/site768.less" media="screen and (max-width: 768px)" />
<link rel="stylesheet/less" href="/Content/site640.less" media="screen and (max-width: 640px)" />
<link rel="stylesheet/less" href="/Content/site320.less" media="screen and (max-width: 320px)" />
</head>
<body>...</body>
</html>
IE10 (IE9 look like here)
IE8 (look on last style which jump over head section)
Are you see here something wrong what I cannot see?
It seems you are trying to use LESS files on your site without including the less.js library, which is required to translate your LESS code into CSS that the browsers can understand.
Download less.js from the top of the page at lesscss.org, and then include it just before your </head> tag:
<script src="less.js" type="text/javascript"></script>
Obviously you'll need to change the path to wherever you store the JS file on your website. Please note that this file is to be included after your stylesheets.
Example with your posted code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mansion</title>
<link rel="stylesheet" href="/Content/normalize.css" media="all"/>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<link rel="stylesheet/less" href="/Content/siteHD.less" media="screen and (max-width: 1920px)" />
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
<link rel="stylesheet/less" href="/Content/site768.less" media="screen and (max-width: 768px)" />
<link rel="stylesheet/less" href="/Content/site640.less" media="screen and (max-width: 640px)" />
<link rel="stylesheet/less" href="/Content/site320.less" media="screen and (max-width: 320px)" />
<script src="less.js" type="text/javascript"></script>
</head>
<body>...</body>
</html>
On another note, you should probably take a look at compiling your LESS code to one or more CSS files using one of the available compilers. Check out the list of available GUI compilers that use LESS.
I am experiencing a strange issue while trying to print in Internet Explorer. I have only tested with IE8.
My stylesheets with media="screen" are being applied even when printing. My page prints properly in Firefox/Chrome.
My head element:
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link type="text/css" rel="stylesheet" href="/styles/reset.css" media="all" />
<link type="text/css" rel="stylesheet" href="/styles/global.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/styles/site.css" media="screen" />
<link type="text/css" rel="Stylesheet" href="/styles/jquery.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/styles/forms.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/styles/print.css" media="print" />
<script src="/scripts/jquery-1.4.4.min.js"></script>
<script src="/scripts/jquery-ui-1.8.8.custom.min.js"></script>
<script src="/scripts/modernizr-1.6.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/scripts/selectivizr-1.0.1.min.js"></script>
<![endif]-->
<script src="/scripts/colorbox/jquery.colorbox-min.js"></script>
<script src="/scripts/global.js"></script>
<script src="/scripts/site.js"></script>
</head>
I have tried searching, and I have not been able to find any related issues. Any help is greatly appreciated.
Can you provide us a link?
This might be a probable solution.
Try switching your print stylesheets' rel value to rel="alternate"