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
Related
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;
}
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 tried to use face-font to add a couple of fonts to my page but unfortunately, even if I followed the instructions to make it compatible with browsers, it only works on Chrome and Safari and I can't work out why. I tried two different methods.
The first one looks like this:
#font-face {
font-family: 'robotoblack';
src: url('roboto-black-webfont.eot'); /* per IE 5-8 */
src: local('☺'), /* direttiva local per IE */
url('roboto-black-webfont.woff') format('woff'), /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */
url('roboto-black-webfont.ttf') format('truetype'); /* Opera, Safari */
}
#font-face {
font-family: 'robotomedium_italic';
src: url('roboto-mediumitalic-webfont.eot'); /* per IE 5-8 */
src: local('☺'), /* direttiva local per IE */
url('roboto-mediumitalic-webfont.woff') format('woff'), /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */
url('roboto-mediumitalic-webfont.ttf') format('truetype'); /* Opera, Safari */
}
and the second one like this:
#font-face {
font-family: 'robotoblack';
src: url('roboto-black-webfont.eot'); /* IE9 Compat Modes */
src: url('roboto-black-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('roboto-black-webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('roboto-black-webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('roboto-black-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('roboto-black-webfont.svg#robotoblack') format('svg'); /* Legacy iOS */
}
#font-face {
font-family: 'robotomedium_italic';
src: url('roboto-mediumitalic-webfont.eot'); /* IE9 Compat Modes */
src: url('roboto-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('roboto-mediumitalic-webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('roboto-mediumitalic-webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('roboto-mediumitalic-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('roboto-mediumitalic-webfont.svg#robotomedium_italic') format('svg'); /* Legacy iOS */
}
Could you please tell me which of the two methods is the best one? Any suggestion to make it work on all browsers?
In case you want to see the example, it is available here:
enter link description here
I hope you can help! Thanks in advance
Cheers
Enrico
I see the answer, you're calling the font-family incorrectly. Make sure to use the #font-face font-family declaration. In this case, use 'robotoblack' instead of 'roboto-black'. And use quotes in your css when calling the fonts.
I also recommend calling #font-face first then call those font-families in the css after.
This is the code I am using.
#font-face {
font-family:gotisch;
src:url('__cmsurl__/files/www/dscaslongotisch.ttf') format:('truetype');
}
h1{
font-family:gotisch;
}
the source is correct, the CMS automatically sets the url, but the font is not displayed in neither Chrome nor Firefox.
When I do use this code:
#font-face {
font-family:gotisch;
src:url('__cmsurl__/files/www/dscaslongotisch.ttf') format:('truetype');
}
#font-face {
font-family: gotisch_IE;
src:url('__cmsurl__/files/www/dscaslongotisch.eot');
}
h1{
font-family:gotisch, 'gotisch_IE';
}
it is working in IE, but still not in Firefox / Chrome
Firebug even shows me, that the font is loaded and I can change it to e.g. Verdana - but still, this one is just not displayed. I even tried fontsquirrel, but even then it did not display the font. Can anyone help me here?
Taken from here you can see that the fonts you provide (ttf and eot) are for IE, Safari, Android, iOS.
#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 */
}
Convert the font to woff and include it like below if you want it to work in Firefox and Chrome.
#font-face {
font-family: 'gotisch';
src: url('path_to/gotisch.eot'); /* IE9 Compat Modes */
src: url('path_to/gotisch.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('path_to/gotisch.woff') format('woff'), /* Modern Browsers */
url('path_to/gotisch.ttf') format('truetype'), /* Safari, Android, iOS */
}
Then use it like this
selector {
font-family: 'gotisch';
}
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