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>
Related
I'm trying to optimize the use of fonts in my Nuxt 3 application. Nuxt 3 documentations suggest to put the fonts in the assets directory, but I wanted to preload the fonts for better performance, so I've added them and the css file that defines my font-faces to the public directory, and added them to my project via app.vue file like this
app.vue
<template>
<Head>
<link rel="preload" as="style" href="/fonts/font.css" crossorigin="anonymous">
</Head>
<nuxt-layout>
<nuxt-page />
</nuxt-layout>
</template>
Here is my font.css file which is placed in the ~/public/fonts directory, next to my font files:
#font-face {
font-family: "Urbanist";
src: url("/fonts/Urbanist/Urbanist[wght].woff2") format('woff2'),
url("/fonts/Urbanist/Urbanist[wght].ttf") format('truetype');
font-weight: 100 900;
font-display: swap;
}
#font-face {
font-family: "Lato";
src: url("/fonts/Lato/Lato-Light.woff2") format('woff2'),
url("/fonts/Lato/Lato-Light.ttf") format('truetype');
font-weight: 300;
font-display: swap;
}
#font-face {
font-family: "Lato";
src: url("/fonts/Lato/Lato-Regular.woff2") format('woff2'),
url("/fonts/Lato/Lato-Regular.ttf") format('truetype');
font-weight: 400;
font-display: swap;
}
#font-face {
font-family: "Lato";
src: url("/fonts/Lato/Lato-Bold.woff2") format('woff2'),
url("/fonts/Lato/Lato-Bold.ttf") format('truetype');
font-weight: 700;
font-display: swap;
}
#font-face {
font-family: "Lato";
src: url("/fonts/Lato/Lato-Black.woff2") format('woff2'),
url("/fonts/Lato/Lato-Black.ttf") format('truetype');
font-weight: 900;
font-display: swap;
}
Everything is working fine, but I wanted to know if it's the right approach?
Is there a better way to preload my fonts for better performance?
First off, you don't really get anything else from loading it from the public directory or the assets one regarding preloading. You may have some optimizations in the assets one but anyway, preloading a local font is probably not useful and can even make your performance page speed worse (because of your page's loading order).
Give a read to that one: https://web.dev/font-best-practices/#be-cautious-when-using-preload-to-load-fonts
Here is a thread on how to optimize fonts even further: https://twitter.com/filrakowski/status/1582691561741070336
There you will see tools from Meownica and Daniel that could be useful.
Font optimization is a broad topic and I'll recommend following the good practices recommended by experts, on top of using those tools.
Want to go even further? Here you go.
TLDR: follow the recommendations.
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"/>
I'm currently loading my font-family from google's CDN like this:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#500;600&display=swap" rel="stylesheet">
But I'm at the point where I need to load them locally in order to optimize my web speed. Here's what I've tried:
#font-face {
font-family: Inter;
src:url("../fonts/Inter-Medium.ttf");
}
#font-face {
font-family: Inter;
src:url("../fonts/Inter-Semibold.ttf");
}
body {
font-family: 'Inter', sans-serif !important;
}
But that isn't working as when loaded from google's cdn. I can see it works only for weight 500 but not when the weight is 600. Some help will be greatly appreciated!
I describe all the actions I have taken to successfully connect to the google font.
I downloaded fonts.google.com (Download button is at the top right) inside text Download family.
I added all the files to my project.
I connected the file direction, HTML/CSS.
#font-face{
font-family: Name;
src: url('Inter-VariableFont_slnt,wght.ttf');
}
p{
font-family: Name;
}
<p>TEST</p>
You can put any name instead of name.
And after that, everything worked.
Screen code:
that's how it was in the beginning:
so after:
I have an angular 13 project, in index.html I have
<link
href="//fonts.googleapis.com/css2?family=Roboto:wght#300;400;500&display=swap"
rel="stylesheet"
/>
when building the app it replaces this element with its content
<style type="text/css">
#font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF,
U+A640-A69F, U+FE2E-FE2F;
}
...
</style>
I want to prevent Angular from this behavior and keep the element <link> as it.
I searched for something like extractCss: false but it deprecated
I thought about using custom-webpack to override plugins but I don't know how to do that (I know how to use custom-webpack, but don't know how to disable a plugin and which plugin should be disabled)
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);