I am using font-awesome for icons in angular app. I checked my web result in pagespeed. I getting an issue with fonts.
Here is pagespeed result.
its said use <link rel=preload> but the problem is that ..fonts/fontawesome-webfont.woff?v=4.7.0 is available in FontAwesome's css file, So how can i add preload for this? or there is any solution for fix it?
Here is my index.html where i included font-awesome cdn.
<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" crossorigin />
I think Here is the problem in css.
#font-face {
font-family: 'FontAwesome';
src: url('/assets/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/assets/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
There are 3 ways to accomplish this.
Use it in local. You know the rest.
Tell browser that "I am going to call these files shortly, be prepared."
Use preconnect. (https://developers.google.com/web/fundamentals/performance/resource-prioritization?hl=en#preconnect)
Make sure you use as="font".
<link rel="preconnect" as="font"
href="https//maxcdn.bootstrapcdn.com/assets/fonts/fontawesome-webfont.eot?v=4.7.0" type="font/eot"
crossorigin />
Tell browser that "I want you to fetch them asap."
<link rel="preload" as="font"
href="https//maxcdn.bootstrapcdn.com/assets/fonts/fontawesome-webfont.eot?v=4.7.0"
type="font/eot" crossorigin="anonymous">
For point 2 and 3, replicate the same for woff and woff2. Declare correct mime types in type.
If you are using WordPress platform and facing this issue then check out this article on to fix preload key request
Simply you can use a WordPress plugin to add preload key to Fonts known as “Asset CleanUp“
Install plugin go to setting->Local Fonts-> Add URL there and it will be fixed.
For more info visit below Ref URL
http://freelancersiddheshlad.com/fix-preload-key-requests-with-fonts-in-wordpress/
Related
In my Next.js project I would like to preload my self-hosted fonts.
My _app.js contains:
<Head>
<link
rel="preload"
href="/fonts/leira/Leira-Lite.ttf"
as="font"
crossOrigin="anonymous"
type="font/ttf"
/>
</Head>
My globals.scss contains:
#font-face {
font-family: "Leira";
src: url("/fonts/leira/Leira-Lite.ttf");
font-weight: normal;
font-style: normal;
}
But this doesn't work. The console (on Firefox) logs "The resource at “url/fonts/leira/Leira-Lite.ttf” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.".
The problem seems to be that the font file gets hashed, but I haven't found a solution to this so far.
I now found out that I got the console warnings because I used relative paths to my public folder instead of absolute paths. This produced hashed font files in the .next folder. With the absolute paths the console warnings are gone and the fonts preload, so the issue is solved now. The code above works.
I have fonts which are defined as
#font-face {
font-family: 'Manrope';
font-weight: 400;
font-style: normal;
src: local("Manrope Regular"),local("Manrope-Regular"), url("#{$staticPath}fonts/Manrope-Regular.ttf");
font-display: swap;
}
Now lighthouse report has an issue with this
How can I optimise it and make this message go away?
Has it been a link, preload would have come handy, but this is an existing codebase and I can't really shuffle things around for now as there are many fonts defined.
Has been reading the https://www.paulirish.com/2009/fighting-the-font-face-fout/ and some related posts on CSS tricks, but all these mention about controlling the visibility and preventing FOUT and handling some cross browser issues. But neither of SO threads answered by Paul Irish or CSS tricks talk about preloading this #font-face specifically.
The question I guess here is that can I prefetch with Javascript without using <link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" /> ?
Maybe it's because the server is slow. You could embed this font via Google Fonts:https://fonts.google.com/specimen/Manrope?query=manro
You need to add this to your -tag in the site: <link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet">
I have an icon font that I preload in Chrome with
<link rel="preload" as="font" type="font/ttf" href="/static/media/IconFont.ad47b1fb.ttf" crossorigin="anonymous">
and reference later in my CSS with
#font-face {
font-family: "IconFont";
src: url(/static/media/IconFont.d9fff078.eot);
src: url(/static/media/IconFont.d9fff078.eot#iefix)
format("embedded-opentype"),
url(/static/media/IconFont.ad47b1fb.ttf) format("truetype"),
url(/static/media/IconFont.c8a8e064.woff) format("woff"),
url(/static/media/IconFont.979fb19e.svg#IconFont) format("svg");
font-weight: normal;
font-style: normal;
}
Within one second of the page loading I use Unicode code point U+E95B with my icon font.
I still get a warning from Chrome, though, that says:
The resource http://localhost:3000/static/media/IconFont.ad47b1fb.ttf 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.
How do I get rid of this warning?
Try changing from rel="preload" to rel="prefetch".
<link rel="prefetch" as="font" type="font/ttf" href="/static/media/IconFont.ad47b1fb.ttf" crossorigin="anonymous">
rel="prefetch" is used for a specific resource that is required but not use immediately. Chrome apparently isn't registering it's use in time and gives the warning, which is my guess.
If prefetch doesn't work try rel="dns-prefetch". rel="dns-prefetch" tells the browser to resolve the dns so when it is needed it can be loaded quickly.
I think prefetch should work though, as it actually requests and downloads the resource and stores it in the cache for later use, but it doesn't cause the browser warning if it isn't used quickly.
[EDIT]
According to this page this page, load your css first also using preload, then your font, i.e.
<link rel="preload" as="style" href="[your-css-file-here.css]">
<link rel="preload" as="font" crossorigin type="font/tff" href="/static/media/IconFont.ad47b1fb.ttf">
Both the css and the font are preloaded then the page renders, so the css doesn't have to be loaded after the font.
In your css file add "local('IconFont')," shown below, full example here
src: local('IconFont'),
url(/static/media/IconFont.ad47b1fb.ttf) format("truetype"),
url(/static/media/IconFont.ad47b1fb.ttf) format("woff"),
/* continue your font declaration */
About all I can think of to help with this. Hope this helps.
This is an example from MDN.
https://mdn.github.io/html-examples/link-rel-preload/fonts/
And that gives the same warning too. When i open the developer tool and press Ctrl+F5 which forces the browser to hard loading of all resources this warning does not come across. If I load the page with F5 warning appears. So this should be a some kind of confusion on browser side. But i couldn't find a reliable answer.
https://github.com/mdn/html-examples/blob/master/link-rel-preload/fonts/index.html
Everything in my web works well except #font face in the CSS file.
My web uses 2 fonts which neither of them can be loaded to display. One of them is fontawesome. I both tried to load the font from my server and the fontawesome server, but the result is the same.
I tried to view the page in IE Edge, Firefox and Chrome browser in PC and neither of them worked properly. However, when I tested in iPad Safari, it worked well.
Please be informed that all font files are accessible and my PC can view font in fontawesome.io perfectly. Please kindly advice what is wrong in my code.
Here is the code:
#font-face {
font-family: 'FontAwesome';
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Here is the result in PC (Font Face is not load):
Here is the result in iPad (Font Face is load successfully):
From the png it's imposible to understand the problem. I can tell you to Read well this link you could found your solution.
If Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Using Sass or Less
Use this method to customize Font Awesome 4.7.0 using LESS or SASS.
Copy the font-awesome/ directory into your project.
Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the #fa-font-path or $fa-font-path variable to point to your font directory.
#fa-font-path: "../font";
The font path is relative from your compiled CSS directory.
If your website runs via HTTPS protocol and you are trying to load external resources via HTTP - the loading will be blocked by browser.
Second, if the above is not the case - make sure you are loading the fonts with correct file path, for example:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
or use bootstrap CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Hello I am trying to add the fonts from FontAwesome in order to use their icons and they require a root folder called Fonts.
I have tried to link it with
<link type="text/css" href="/myPath/font" />
The fonts from FontAwesome are declared in an #font-face rule in the css.
If you use the less or scss version, you can just override the path set in variables:
$fa-font-path: "path/to/your/fonts";
If you just use the css version, you should be able to redeclare the font-face rule (replace '../fonts/' by your path):
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Just curious, how exactly do you know the fonts are not being pulled in? Is it because you are unable to create icons using font-awesome?
Aside from that, if you installed font-awesome with bower, npm or pulled from github it should have the following directory structure.
font-awesome
css
font-awesome.css
font
(font files / eot, svg, ttf, woff)
If it is in this directory structure then your css should point to those font files. Then it's just a matter of pulling in the font-awesome css like so:
<link rel="stylesheet" href="{{path}}/font-awesome/css/font-awesome.css" />
I would double check your directory structure for font-awesome and maybe try installing it via bower if nothing else.
I hope that helps.
As far as i am aware you have to add the link to the css file and the css file will link to the font folder which is preset by the font-awesome library. Therefore your code will contain the font-awesome.min.css file and you will need to have the font folder in the same directory,but the link will look in the html like this :
<link rel="stylesheet" type="text/css" href="font-awesome.min.css"/>
or using the cdn:
<link rel="stylesheet" type='text/css' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
Hope this helps !
use chrome browser,
Press F12 when and goto console tab
check details of errors and it will show the path browser is looking for FONTS,
just make sure that fonts are present on that path...
that's it...