I recently did an update to the code I'm working on for a website and for some reason Google fonts have stopped working on the site
http://www.gezzamondo.co.uk/simple.html
I don't want to copy and paste all the code in as there's quite a lot. Anyone else having this problem just now or is there an error somewhere
Why you add a text CV in your style.css, remove it.
CV#charset "UTF-8";
/* CSS Document */
body {
font-family: 'Roboto', sans-serif;
margin:0;
padding:0;
font-weight:300;
}
You need to load the font before the style.css, switch this
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">
to:
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">
<link type="text/css" rel="stylesheet" href="css/style.css">
When working with google fonts replace their single marks with double quoutemarks and if you're working on a local server make sure the http:// is included when linking.
I have same problem just remove http:
<link type="text/css" rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">
Related
I don't want the render blocking of declaring a custom font using #font-face, so I've tried to copy how my google font CDN font is loaded for my custom server font, arriving at this:
<noscript id="deferred-styles">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" rel="stylesheet" type="text/css">
</noscript>
But it does not work.
I've tried changing href for src="../Bluu...
But that didn't work.
I've tried omitting the type, since woff2 isn't text/css.
It's important, I'm not willing to block my page load for a 35kb font file, and there's no CDN for BluuNext, so I need to find a performant way to make this work or I'll just be resigned to a beiger website.
RIGHT!
I've tried the answers below, possibly they work for other fonts but not BluuNext. Perhaps other fonts maybe come in configurations beyond bold, unlike BluuNext, so maybe that causes the issue.
It IS possible to load BluuNext font, but so far only with render blocking #font-face method, loading betwixt the tags.
Here's a minimum example including a few of the proposed solutions not working...
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Bluu Next test</title>
<link rel="preload" as="style" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext:bold" />
<link rel="stylesheet" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" media="print" onload="this.media='all'">
<link rel="stylesheet" media="print" onload="this.media='all'" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext:bold" type="text/css" />
<noscript id="deferred-styles">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext:bold" type="text/css"/>
</noscript>
<script type="text/javascript">
// Load CSS
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
<style>
h2{font-family: bluuNext; font-size: 3em;}
</style>
</head><body>
<h2>Is this Bluu Next?</h2>
</body>
</html>
You can see some fancy javascript governing the loading of id="deferred-styles", that came at the suggestion of Google lighthouse and works well for Google's CDN fonts, not working for BluuNext so far.
Here's the link to download BluuNext, a lovely gothic, serif font. CLICK THE DOWNLOAD ARROW TOP RIGHT.
I'd love some ideas. I'd love to use this particular font, which is for some reason seemingly resistant to existing solutions.
You can not load a font directly in HTML, you need help of CSS for this. And if you open the google font link you will be able to see how it's done.
https://fonts.googleapis.com/css?family=Roboto:300,400,500
This url is a css file not a font file.
Open it and you will understand how google used #font-face to load the font.
Here is the documentation from mdn:
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
The modern approach to async-style <link rel="stylesheet" /> elements is to use media="print" with onload="this.media='all'".
The media="print" attribute means browsers should still download the stylesheet, but won't block the page's loading.
The onload="this.media='all'" event-handler causes the stylesheet to become enabled when and if it does load.
Because browsers might still not download print stylesheets at all, you should also add an explicit <link rel="preload" /> version (for the same stylesheet) as a strong hint that the browser should download it anyway.
However this still depends on browsers having JavaScript enabled in order for the onload="" handler to work.
...hence the need for the duplication of code in a <noscript> wrapper element.
Also, you really should be using root-relative (i.e. "/foo"-style) URIs in your <link href="" attributes, otherwise they wont' work if the user isn't accessing a page in your site's root.
I assume your BluuNext-master directory is located in your site's root.
So change your HTML to this:
<head>
<!-- onload+media trick to defer loading these stylesheets: -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="preload" as="style" href="/BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" />
<link rel="stylesheet" media="print" onload="this.media='all'" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css" />
<link rel="stylesheet" media="print" onload="this.media='all'" href="/BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" type="text/css" />
<!-- But if Javascript is used the <noscript> will ensure the browser will load it: -->
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css" />
<link rel="stylesheet" href="/BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" type="text/css" />
</noscript>
</head>
I do think it's silly that we need to basically repeat ourselves three times as a workaround for something that should just be a part of HTML already.
Here is the link of my website:
https://foysalmeazi.github.io/foysalportfolio/
when I visit the website it show only html but css is not showing.
It missing bootstrap on your web, in html code:
instead of
<link rel="stylesheet" href="Css/bootstrap.min.css">
change to:
<link rel="stylesheet" href="CSS/bootstrap.min.css">
Folder on path is case sensitive.
I want to use the Google Font "Noto Serif" for my website.
My problem is that when I am testing it with Google PageSpeed Insights, it says everything is perfect except for one thing:
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
Your page has 1 blocking CSS resources. This causes a delay in
rendering your page. None of the above-the-fold content on your page
could be rendered without waiting for the following resources to load.
Try to defer or asynchronously load blocking resources, or inline the
critical portions of those resources directly in the HTML.
I am aware of a bad solution for this. It's to link the font using <script> at the bottom of the HTML file. The problem with that solution is it causes a Flash of Unstyled Text every time you click on something in my website.
I am using jekyll hosted with GitHub Pages, so I don't think I can install Font Face Observer :(
You can load the web fonts asynchronously with this script:
<script>
WebFontConfig = {
typekit: { id: 'xxxxxx' }
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
You'll need this library, it's pretty easy to implement. I've learn this from a course I took recently, Responsive Web Design Fundamentals, if you're interested you can check it out here.
Based on this strategy to preload stylesheets:
<link rel="preload"
href="https://fonts..."
as="style"
onload="this.onload=null; this.rel='stylesheet'; document.body.classList.add('fontLoaded')">
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body.fontLoaded {
font-family: 'GOOGLE FONT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
Add two attributes to your code. One is rel="preload" and the other is as="style". The final code would look like the below:
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" rel="preload" as="style">
Very simple approach:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
Just replace styles.css with your font URL. It loads the font, and then once it finishes (onload) it "enables" it by switching the rel property to stylesheet.
More details here.
Only add block tag
https://fonts.googleapis.com/css?family=Noto+Serif&display=block
Ref : Controlling Font
Has any one tried this solution?
<!-- other <head> stuff -->
<!-- connect to domain of font files -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- optionally increase loading priority -->
<link rel="preload" as="style" href="(font CSS URL here)">
<!-- async CSS -->
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="(font CSS URL here)">
<!-- no-JS fallback -->
<noscript>
<link rel="stylesheet" href="(font CSS URL here)">
</noscript>
</head>
Here ya go, include this in the body tag and not the head tag
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" lazyload>
Updated 2020
<link rel="preload" as="style" href="https://yourcss.css" onload="this.rel='stylesheet'" />
I'm a newbie to web design and recently got into Bootstrap. I also recently started using Codepen. After working on a project in Codepen I went to copy and paste my code from there into Sublime and for whatever reason it changed some of the stuff on my page i.e. the CSS for my footer and for some of the text.
Now for whatever reason my footer is huge and some of my text is gold. Nowhere in my CSS did I specify gold text. When I move the CSS link in my HTML file below the script tags for Bootstrap my page changes. But regardless of where I put the CSS link or the scripts I still don't get my page displaying the correct way.
Why does the location of my CSS link and my Bootstrap script matter? They are both in the head.
I recently installed Emmet and also recently started toying with Github and pushed the files to Github right before this issue. Not sure if that is relevant.
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="realsite/styles.css">
<link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>
The CSS specification dictates the following rules when applying css:
!important
Rule origin
Specificity
Order
It sounds like the 4th is where your getting your issue. What this means is if you have the following:
.cssrule {
color: white;
}
.cssrule {
color: gold
}
Then the color will be gold, because it was the last rule specified. Generally, the specificity rule is used to get around this in my experience, so for example:
#ida .cssrule {
color: white;
}
.cssrule {
color: gold
}
in that scenario, a div like this:
<div class="cssrule" id="ida">
would apply the color white.
One of my stylesheets doesn't seem to load every style. I've read everything i can find but the issues that people usually have are obvious things to me but i can't seem to figure out my own issue. I have a site made using Razor and this is where i call my stylesheets in the head section.
<link href="#Url.Content("~/css/reset.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/jquery-ui-1.10.1.custom.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/searchLayout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/searchSkin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/skin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/AvailabilityLayout.css")" rel="stylesheet" type="text/css" media="screen" />
<link href="#Url.Content("~/css/AvailabilitySkin.css")" rel="stylesheet" type="text/css" media="screen"/>
<link href="#Url.Content("~/css/Home.css")" rel="stylesheet" type="text/css" />
The issue seems to be with the AVailabilitySkin.css and sometimes AvailabilityLayout.css. So for example i have this code in AvailibilitySkin.css:
td#price h2, td#price h4
{
text-align:center;
}
And it doesn't get picked up, I don't even see it being overwritten by another style or anything. But if I add the same code to the Skin.css file then it works perfectly fine. I can't add all my styles to Skin.css so i can't just put that style in there and call it a day. It has to be separated, right now the site is being developed locally so unfortunately i cannot post a link to the site but if anything is needed (like more code) please let me know. I haven't been able to find the issue and I've tried adding #charset "UTF-8"; at the top of the stylesheets and it didn't really do much.
Problem has been fixed guys/gals. In the end it was just another mistake by me and it wasn't coming up in the Console and Visual Studio wasn't flagging it as an issue. It was mostly just a missed single quote and another programmer here ran the code through WebStorm and it came right up and fixed it. Thanks for the help and sorry for the dumb mistake question.