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 don't know what this icon is called and how to use it for my website. Can someone help me out.
That'd be one of the favicons you need to set on your page. If you use an automatic tool like https://realfavicongenerator.net you will be able to easily cover all the required different files using a single image.
The icon that is used to install to the homescreen is determined by using the largest icon found in one of the following tags:
<link rel="icon" sizes="192x192" href="nice-highres.png"> (recommended)
<link rel="icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">
Source: https://developer.chrome.com/multidevice/android/installtohomescreen#icon
Chrome uses the same icon as the favicon, bookmark icon and “Add to home screen” icon. It picks the widest PNG icon it can find which is no larger than 192×192.
Source: https://realfavicongenerator.net/blog/android-chrome-and-its-favicon/
It's called favicon. Somewhere you should have a code like this:
<link rel="icon" type="image/png" href="/favicon.png" />
Follow the href to the location. You can find it in your header somewhere.
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.
I'm building a basic site and thought of using the flatpages app for a couple of pages. Problem is, I'm not sure how to serve static files in my flatpages.
The link in my flatpage template is this:
<link type="text/css" rel="stylesheet" href="static/base.css" />
However, firebug shows that file is being looked at:
localhost:8000/example_flatpage/static/base.css
instead of
localhost:8000/static/base.css
Infact, every link in the template works this way.
Instead of
localhost:8000/home/
localhost:8000/example_flatpage/home/
Here's my default flatpage template:
<html><head>
<title>title</title>
<link type="image/x-icon" rel="icon" href="static/favicon.ico" />
<link type="text/css" rel="stylesheet" href="static/base.css" />
</head>
<body>
mainly plain text
</body>
</html>
Any ideas??
Use "/static/base.css" instead of "static/base.css". The first one is a path relative to root '/', while the second form is a path relative to the current page.