There are countless of guides on preloading fonts properly and none of which seems to work on both Firefox and Chrome.
I use:
<link rel="preload" href="URL" as="font" type="font/woff2" crossorigin="anonymous">
But receive this on Firefox:
The resource at “file.woff2” preloaded with link preload was not used
within a few seconds. Make sure all attributes of the preload tag are
set correctly.
Which attribute is missing, and what is the proper way of preloading fonts that works on all modern browsers?
The font is loaded via style.css:
#font-face {
font-family: 'NAME';
src: url('URL to file.eot');
src: url('URL to file.eot?#iefix') format('embedded-opentype'),
url('URL to file.woff2') format('woff2'),
url('URL to file.woff') format('woff'),
url('URL to file.ttf') format('truetype'),
url('URL to file.svg#NAME') format('svg');
font-display: swap;
}
The following sample I have made is working for each of the latest browsers which I am currently using:
Firefox
98.0.1 (64-bit) is up to date
Microsoft Edge
Version 99.0.1150.39 (Official Build) (64-bit)
Chrome is up to date
Version 99.0.4844.51 (Official Build) (64-bit))
I have tested so many ways to do this, the main reason I have a font to that error is that when you don't use that preloaded font properly, I will provide the sample I have worked with below so you can test it. I have removed the properties including font style, font-weight, font-display, local, and one single URL source, the final reason is you don't use that font properly.
So, check whether you are using that font. Perhaps the font name is incorrect? and Finlay if your web browser is up to date and compatible with preload feature.
See these two links for more info, browser_compatibility and CSS_Font_Loading_API.
The scenarios I have started with was to load 2 different way the local (I have downloaded the entire font for browser compatibility) and remote (a single woff2 font file) both worked for me.
/*
I have downloaded this entire font local and works great for me...
*/
#font-face {
font-family: 'Syne Mono';
font-style: normal;
font-weight: 400;
src: url('font/syne-mono-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('font/syne-mono-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/syne-mono-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('font/syne-mono-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('font/syne-mono-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('font/syne-mono-v13-latin-regular.svg#SyneMono') format('svg'); /* Legacy iOS */
font-display: swap;
}
#font-face {
font-family: 'FontAwesome';
font-style: normal;
font-weight: 400;
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2');
url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2') format('woff2'),
font-display: swap;
}
#container {
/*
IF YOU DON'T USE THE PRE-LOAD THE Browser shows you an error
The resource at “file.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
Try to comment on this and test it just like me.
*/
font-family: 'Syne Mono';
}
#container2 {
font-family: 'FontAwesome';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StackSolutions - Font Preload</title>
<link rel="preload" href="font/syne-mono-v13-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container" >
<h2>This is a Syne Mono font</h2>
</div>
<div id="container2">
<h2>This is a FontAwesome font</h2>
</div>
<div id="container3">
<h2>This is not using preload</h2>
</div>
</body>
</html>
Final result:
It's just warning, all you need to do is try import the file right after the preload
<link rel="preload" href="/public/font/regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="/public/font/regular.woff2" type="font/woff2"/>
Related
Whatever I did, I couldn't solve this issue. Google Pagespeed is still displaying the same message.
I've tried with many different code and I think this is the right one.
Appreciate if someone can tell me what I'm missing.
<link rel="preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2" as="font" type="font/woff2" crossorigin>
<style>
#font-face {
font-display: swap;
font-family: 'Glyphicons Halflings';
src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2');
}
</style>
drag_indicator is not included with the regular icons in material design. Should I somehow add it manually?
Following this guide I added the icons with the help of the following css:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url("#{fontPath}/MaterialIcons-Regular.eot"); /* For IE6-8 */
src: local('Material Icons'), local('MaterialIcons-Regular'), url("#{fontPath}/MaterialIcons-Regular.eot?#iefix")format("embedded-opentype"), url("#{fontPath}/MaterialIcons-Regular.woff2") format('woff2'), url("#{fontPath}/MaterialIcons-Regular.woff") format('woff'), url("#{fontPath}/MaterialIcons-Regular.ttf") format('truetype'), url("#{fontPath}/MaterialIcons-Regular.svg") format('svg');
}
.grey-color {
color: #grey-color;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
text-rendering: optimizeLegibility;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Now I am able to use codes to embed some icons. E.g. the following markup piece works as expected (displays the move_vert icon):
<span class="material-icons">
</span>
While the following piece do not work:
<span class="material-icons">
</span>
It seems that I am not the only one experiencing the issue. Here is a similar thread. But it is not clear to what conclusion the thread led. So, the question is still relevant for being posted here.
It is included, maybe the problem is that your Material icons lib is downloaded locally (self-host web font) and it is old.
If you use fonts via Google-hosted Fonts, no problems occur.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<title>Example</title>
</head>
<body>
<i class="material-icons">drag_indicator</i>
</body>
</html>
Try to re-download Fonts, if it didn't help, you can also download WOFF2 file from the same source that google web hosting provides: WOFF2
Which included in this link: https://fonts.googleapis.com/icon?family=Material+Icons
I've CSS and XHTML files. I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder.
In my XHTML i mentioned the CSS Path,
'<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />'
AND my CSS file have styles like,
#font-face {
font-family:roboto-bold;
src: url('../fonts/Roboto-Bold.tff') #ttf;
}
.UX_FontClass {
font-family: roboto-bolditalic !important;
font-size : 25px !important;
}
also mentioned XHTML in OutputText as styleClass="UX_FontClass "
Even though font is not working in any browser. What i did wrong with my code? OR Anything i missed out?
You should use google fonts, its really easy to use.
https://www.google.com/fonts#UsePlace:use/Collection:Robot
example
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<p style="font-family: 'Roboto', sans-serif;">Hello World</p>
</body>
You are using custom font so you need to add a few font type format as well; like ttf, eot and svg for iphone, ipad devices.
Note: Some browsers supports different font type that's why you need
ttf,svg or eot.
#font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic-webfont.eot');
src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-ThinItalic-webfont.woff') format('woff'),
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
font-weight: 200;
font-style: italic;
}
Remember after that you need to add this code in class UX_FontClass
.UX_FontClass {font-family: 'Roboto', Arial, Helevtica, sans-serif; }
The error is in defining a font named roboto-bold in the #font-face clause, but trying to use a font named roboto-bolditalic later on. That is not the same family!
Solution: make sure the names match.
You probably meant
font-family:'roboto-bold'; font-style:italic;
or, since you're defining the size too, you could use the font shorthand
font:italic 25px 'roboto-bold';
And there's no need for the !important.
Why not use Google fonts?
Place in the header of your html:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500italic,500,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
Use in your css:
font-family: 'Roboto', sans-serif;
its really easy to use in css.
#import url(http://fonts.googleapis.com/css?family=Roboto:700,400,500,300);
I am creating an asp.net website in which I want to set the font of a label.I am trying to do this through CSS.The font that I need to apply is Shivaji05, which would not be available on most systems.This is the CSS:
body
{
}
#font-face {
font-family: "Shivaji05";
src:url("/Shivaji05.eot");
src:url("/Shivaji05.woff")format("woff");
src:url("/Shivaji05.ttf")format("truetype");
font-weight: normal;
font-style: normal;
}
.txtQues
{
font-family: "Shivaji05";
font-size:14px;
background-color:White;
}
The source:
<head>
<link href="../FontSettings.css" rel="stylesheet" type="text/css" />
</head>
<asp:Label ID="lblQuestionText" runat="server" Text="Type Your Question Here"
Font-Bold="True" EnableTheming="False" CssClass="txtQues"></asp:Label>
But this does not work, is there any mistake in this?how should I get this working?Kindly suggest if there are any other alternatives to this approach.
Have a look at below code. In addition; custom font will render in every browser once define the font MIME type as well in config file or in IIS setting.
#font-face {
font-family: 'Shivaji05';
src: url('Shivaji05.eot');
src: url('Shivaji05.eot?#iefix') format('embedded-opentype'),
url('Shivaji05.woff') format('woff'), /* Modern Browsers */
url('Shivaji05.ttf') format('truetype'),
url('Shivaji05.svg#svgFontName') format('svg');
}
Note: All latest browser have support for font type woff.
Update
see attached image. Define MIME Type for font format .woff the MIME type will be application/x-font-woff
I just installed the fonts Aller Regular and Aller bold on my site via #font-face (generated by fontsquirrel.com).
Here is the CSS:
#font-face {
font-family: 'AllerRegular';
src: url('library/fonts/aller_rg-webfont.eot');
src: url('library/fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/aller_rg-webfont.woff') format('woff'),
url('library/fonts/aller_rg-webfont.ttf') format('truetype'),
url('library/fonts/aller_rg-webfont.svg#AllerRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'AllerBold';
src: url('aller_bd-webfont.eot');
src: url('library/fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/aller_bd-webfont.woff') format('woff'),
url('library/fonts/aller_bd-webfont.ttf') format('truetype'),
url('library/fonts/aller_bd-webfont.svg#AllerBold') format('svg');
font-weight: normal;
font-style: normal;
}
This is working fine when I use ether of the fonts in firefox, however when I use IE8 the webpage crashes attempts to reopen and crashes again. A live example can be found at http://rcnhca.org.uk/sites/first_steps/
Does anyone know what's causing this madness?
I had the same problem a while ago, and after some debugging I found that the crash was because of the #font-face (which in my case was included as a separate stylesheet called fonts.css) was rendered inside <head>. IE8 has a problem with this, but works just fine when I moved the rendering to just inside <body>.
Try this:
<head>
<!--[if gt IE 8]><!-->
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--><![endif]-->
</head>
<body>
<!--[if IE 8]>
<link href="fonts.css" rel="stylesheet" type="text/css">
<![endif]-->
<!-- The rest of your page here -->
</body>
This renders the fonts stylesheet within your head if the browser is newer than IE8. If the browser is IE8, it renders it just inside your body.
Note: You may have to adjust the conditional comments if you're supporting IE7 or older.
IE8 seems to prefer double quotes. This fixed unstyled text on first load for me, might fix crashes for you.
Kudos to the guy here, which solved my problem: #font-face not embedding in IE8 and under
I had similiar issure developing page with custom fonts. IE8 crashed. I fixed it by placing IE8 font-face declaration BEFORE any other font-face declarations. I.E:
<!-- Custom .eot fonts for IE8 -->
<!-- IE8 fonts should load before other font-face declarations to avoid IE8 crash -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="/pub/stylesheets/fonts-ie8.css" />
<![endif]-->
<!-- Custom .woff fonts -->
<link href="/pub/stylesheets/fonts.css" rel="stylesheet">