I need to optimize my page at work (my first job as web dev) and i can't get rid of font-display error message at speed insights. I've googled, i've read docs, blogs, forums etc. and i think im expert in this topic now however still speed insights doesn't accept it. Why is that? Please send help :)
Problem seems to occur with fontawesome, not with regular fonts, i've dealt with those. I have fonts downloaded offline, im importing them, and importing stylesheet. Code below
#font-face {
font-family: 'fa-brands-400';
src: url('/fontawesome/webfonts/fa-brands-400.eot'); /* IE9 Compat Modes */
src: url('/fontawesome/webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fontawesome/webfonts/fa-brands-400.woff') format('woff'), /* Modern Browsers */
url('/fontawesome/webfonts/fa-brands-400.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fontawesome/webfonts/fa-brands-400.svg#svgFontName') format('svg'); /* Legacy iOS */
font-display: swap;
font-family: 'fa-regular-400';
src: url('/fontawesome/webfonts/fa-regular-400.eot'); /* IE9 Compat Modes */
src: url('/fontawesome/webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fontawesome/webfonts/fa-regular-400.woff') format('woff'), /* Modern Browsers */
url('/fontawesome/webfonts/fa-regular-400.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fontawesome/webfonts/fa-regular-400.svg#svgFontName') format('svg'); /* Legacy iOS */
font-display: swap;
font-family: 'fa-solid-900';
src: url('../fontawesome/webfonts/fa-solid-900.eot'); /* IE9 Compat Modes */
src: url('../fontawesome/webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fontawesome/webfonts/fa-solid-900.woff') format('woff'), /* Modern Browsers */
url('../fontawesome/webfonts/fa-solid-900.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fontawesome/webfonts/fa-solid-900.svg#svgFontName') format('svg'); /* Legacy iOS */
font-display: swap;
}
Related
Im working on this website:
poschbuchhandlung.at/hu/index.html
I tried to implement a Google Font with #font-face:
#font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: url('../fonts/inconsolata-v18-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
url('../fonts/inconsolata-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/inconsolata-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/inconsolata-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/inconsolata-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/inconsolata-v18-latin-regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
}
This does work in Firefox but not in Safari!And I can't figure out how, I already spend furious hours browsing the internet!
What is the problem? Do you have any guess?
Thank you very much
Font is inside /hu folder
Instead of:
../fonts/inconsolata-v18-latin-regular.ttf
Use:
../hu/fonts/inconsolata-v18-latin-regular.ttf
Over the years, I've used the following font-face declaration:
#font-face {
font-family: 'museo_sans_rounded';
font-style: normal;
font-weight: 500;
src: url('../fonts/museo/museosansrounded-300-webfont.eot');
src: url('../fonts/museo/museosansrounded-300-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museo/museosansrounded-300-webfont.woff2') format('woff2'),
url('../fonts/museo/museosansrounded-300-webfont.woff') format('woff'),
url('../fonts/museo/museosansrounded-300-webfont.ttf') format('truetype'),
url('../fonts/museo/museosansrounded-300-webfont.svg#museo_sans_rounded300') format('svg');
}
Now I just need to support IE11 and all the modern browsers. Can this declaration be simplified?
According to this article on embedding custom fonts using #font-face:
The #font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.
There are various different levels of browser support for different fonts. The trend seems to be that you can get away with offering WOFF and WOFF2, but this is their recommendation for "deepest possible browser support":
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
For IE11:
#font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
}
.eot ==> for IE9 Compat Modes
.eot?#iefix ==> for IE6-IE8
.woff2 ==> for super Modern browser like Chrome, Firefox...
.woff ==> for pretty Modern.. so to speak
.ttf ==> specially for Safari, Android, iOS
.svg#svgFontName ==> just for Legacy iOS
When I use this on my style tag the font works just fine with FireFox and Google Chrome And Edge :
#font-face {
font-family: 'AlArabiyaRegular';
src :url('template/fonts/ae_AlArabiya.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
but it's not working on IE so I seareched about it and it's looks like I have to use 'woff' and 'eot' in order to make it work with IE so I used this code :
#font-face {
font-family: 'AlArabiyaRegular';
src: url('template/fonts/ae_AlArabiya.eot');
src: url('template/fonts/ae_AlArabiya.woff') format('woff'),
url('template/fonts/ae_AlArabiya.tff') format('truetype'),
url('template/fonts/ae_AlArabiya.svg#webfontg8dbVmxj') format('svg');
}
but when I change my style to it's not working even on FireFox
Use all the css font family src posibilities:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
If a .ttf works in other browsers but not IE, it's usually a sign that the font hasn't got the "installable bit" set. See this thread for more info and fixes.
I have wrote a css for add "HelveticaNeueLT Std Thin" font for my website. But that css doesn't work for IE browers, also that font can't convert to eot via http://www.fontsquirrel.com/tools/webfont-generator
That website gives error "Adobe has requested that their font HelveticaNeueLT Std Thin Regular be blacklisted by the Generator. You will not be able to convert this font."
So I convert this form another website but didn't work,
This is my css, this work for other browers, But IE has problem.
#font-face {
font-family: Helvetica_Thin;
src: url("fonts/HelveticaNeueLTStd-Th_0.otf") format("opentype");
src: url("fonts/HelveticaNeueLTStd-Th_new.eot"),
url("fonts/HelveticaNeueLTStd-Th.ttf") format('truetype'),
url("fonts/HelveticaNeueLTStd-Th_new.eot?#iefix") format('embedded-opentype');
}
this is link for download above font http://font2s.com/fonts/50728/helvetica_neue_lt_std_35_thin.html#.VBvpBxYsD3Y
Try to write this format
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
I've tried many of the solutions found in other topics but still the font won't load in IE8.
The fonts are converted by FontSquirrel and also the CSS has been generated there. No alternation.
According to the other topics.. it should work now. But.. it does not. Is there any workaround to make it work? Or is it just one of those things i can keep hating ie8 about?
Problem can be seen on this URL: www.kokomogroningen.nl
Font-face is currently:
#font-face {
font-family: 'dincondregularregularcondRgRgularregularcondRgRgularregularcondRgRg';
src: url('/css/ff_din_condensed_regular-webfont.eot');
src: url('/css/ff_din_condensed_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/ff_din_condensed_regular-webfont.woff') format('woff'),
url('/css/ff_din_condensed_regular-webfont.ttf') format('truetype'),
url('/css/ff_din_condensed_regular-webfont.svg#dincondregularregularcondRgRgularregularcondRgRgularregularcondRgRg') format('svg');
font-weight: normal;
font-style: normal;
}
Source http://css-tricks.com/
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
This may also help
Font Face not working in IE8 as expected