http://www.milknhny.co.uk/
I have a fontface call on my CSS for the above, but for a bizarre thing its not displaying on chrome at my work, yet works at home!
My call is :
#font-face {
font-family: Bazar;
src: url(http://www.milknhny.co.uk/fonts/Bazar.ttf);
src: url(http://www.milknhny.co.uk/fonts/Bazar.eot);
src: url(http://www.milknhny.co.uk/fonts/Bazar.svg);
src: url(http://www.milknhny.co.uk/fonts/Bazar.woff);
}
Any ideas why it wouldnt be working on my chrome, as i thought by calling all the above that it would be suitable cross browser.
thanks
Update:- The below fixed the chrome problem... however still not working in IE... any ideas?
You probably had not actually uploaded the font files. This seems to have caused a redirection and then a 404 Not Found response from a server. (The initial problem was a malformed #font-face rule, which you fixed in your answer.)
The problem seems to have been fixed now.
I fixed this by doing the below: (slight changes)
#font-face {
font-family: 'Bazar';
src: url('fonts/bazar.eot');
src: url('fonts/bazar.eot?#iefix') format('embedded-opentype'),
url('fonts/bazar.woff') format('woff'),
url('fonts/bazar.ttf') format('truetype'),
url('fonts/bazar.svg#bazarmedium') format('svg');
font-weight: normal;
font-style: normal;
}
thanks anyways :D
Related
There are two fonts that, although they are appearing on the site just fine, are producing errors in DevTools.
#font-face {
font-family: Impact;
src: url(../fonts/impact-webfont.eot);
src: url(../fonts/impact-webfont.eot?#iefix) format('embedded-opentype'),
url(../fonts/impact-webfont.woff) format('woff'),
url(../fonts/impact-webfont.ttf) format('truetype'),
url(../fonts/impact-webfont.svg#impactregular) format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: kmi-genericons;
src: url(../fonts/kmi-genericons.eot?70543738);
src: url(../fonts/kmi-genericons.eot?70543738#iefix)
format('embedded-opentype'),
url(../fonts/kmi-genericons.woff2?70543738) format('woff2'),
url(../fonts/kmi-genericons.woff?70543738) format('woff'),
url(../fonts/kmi-genericons.ttf?70543738) format('truetype'),
url(../fonts/kmi-genericons.svg?70543738#kmi-genericons) format('svg');
font-weight: 400;
font-style: normal;
}
The paths in the console errors are incorrect. The CSS snippet above is found in /wp-content/themes/kmi/css/compiles.min.css. Since the path is relative, it should be loading from /wp-content/themes/kmi/fonts/. The network tab shows it's recognizing the correct path as well:
So it's like there are 2 requests for the same font: one at the correct relative path, and one at an incorrect root path. Why would this be?
Turns out, Nehemiah was correct in his comment on my question. This CSS was being inserted via JavaScript through a plugin (Above the Fold Optimization), which I didn't realize, in addition to being called from a regular <link> tag. Thus, it was loading twice, and the relative path did not resolve when inserted via JavaScript.
Sorry for missing this - thank you!
I want my friend to able to check out my WIP site that I've been developing locally using Chrome (localhost/sitename/, or now actually myIP/sitename). I got it to work and realized my fonts weren't loading, and then checked all my other browsers on my computer and noticed the same thing.
I've done absolute paths and even tried adding permissions to the .htaccess file to no avail. Below is my code. Any suggestions? Nothing is live yet.
#font-face {
font-family: 'arvo';
src: url('/arvo-regular-webfont.eot');
src: url('/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/arvo-regular-webfont.woff') format('woff'),
url('/arvo-regular-webfont.ttf') format('truetype'),
url('/arvo-regular-webfont.svg#arvo') format('svg');
font-weight: normal;
font-style: normal;
}
Yes, I know there is an identical question and many similar ones asked and answered here and many resources online discussing this issue. None have helped in my case so I am taking desperate measures.
I am trying to load web fonts using the #font-face syntax. Here's the code (I am loading more than one but the syntax is identical):
#font-face {
font-family: 'MyFont';
src: url('../typography/MyFont-Book.eot');
src: local('?'),
url('../typography/MyFont-Book.eot?#iefix') format('embedded-opentype'),
url('../typography/MyFont-Book.woff') format('woff'),
url('../typography/MyFont-Book.ttf') format('truetype'),
url('../typography/MyFont-Book.svg') format('svg');
font-weight: normal;
font-style: normal;
}
As stated in the title, it's not working in ie8 (works fine in ie9 and 10 and obviously all other browsers). I have tried several things.
In the beginning, I got the error "CSS3111: #font-face encountered unknown error" and I found this site. I followed the steps, changed the names of the fonts and regenerated them. Apparently, that must have fixed something because I am not getting that error anymore. I also see the fonts being loaded correctly in the network sniffer, all coming back with a clean 200.
I have cleared my cache (several times) but still no dice. The font still doesn't show up on the page. Instead, the fallback "Arial" font is displayed, messing up the layout because it's way bigger than the web font.
Anyone got a clue what the eff might be going on?
I have several projects which load fonts down to IE8. They have an almost identical definition to the one you have but, without the src : local(?).
#font-face {
font-family: 'MyFont';
src: url('../typography/MyFont-Book.eot');
src: url('../typography/MyFont-Book.eot?#iefix') format('embedded-opentype'),
url('../typography/MyFont-Book.woff') format('woff'),
url('../typography/MyFont-Book.ttf') format('truetype'),
url('../typography/MyFont-Book.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'advertisingmediumregular';
src: url('fonts/advertisingmedium-webfont.eot');
src: url('fonts/advertisingmedium-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/advertisingmedium-webfont.woff') format('woff'),
url('fonts/advertisingmedium-webfont.ttf') format('truetype'),
url('fonts/advertisingmedium-webfont.svg#advertisingmediumregular') format('svg');
font-weight: bold;
font-style: normal;
}
the text disappear in google chrome when I wrote this code can anyone help me please
I already had the same problem. I was adviced to generate my web fonts with a tool like the FontSquirrel webkit fonts generator. Upload your font's files and download back a all browsers compatible pack. Include the css in your HTML page in addition to yours. And it seems to work since I do like this. I hope it will be the same for you.
Check the site:
http://tinyurl.com/caljnqb
I'm using font-face:
#font-face {
font-family: 'SegoeUI';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.svg#SegoeUI2') format('svg');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: 'SegoeUIBold';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.svg#SegoeUI3') format('svg');
font-style: normal;
font-weight: bold;
}
#font-face {
font-family: 'SegoeUIItalic';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.svg#SegoeUI4') format('svg');
font-style: italic;
font-weight: normal;
}
And there is the problem with output in Firefox, Chrome and Opera browsers. Everything looks OK on IE. Font looks sharp. Why does it happens? Maybe I'm doing something wrong?
different browsers render fonts differently.
The solution I've used in the past is to re-arrange the order in which the fonts are supplied to the font face, based on which browser is rendering the page. Usually my problems are in the earlier versions of IE so I've used a separate style sheet that offered the .woff file before the ttf file. Because some browsers can only read certain font type files but can read both and stop looking after finding one that works. If you re-arrange them you may be able to use one that renders a bit better.
If you end up using separate css you can use the $_SERVER arrays http_user_agent property to set a font css based on the browser.
googles Droid font is a font that renders funny sometimes depending on the browser as well so researching that might help you find other approaches.
It seems that there are a few tricks in ordering properly each format
See for example
This is the Fontspring bulletproof syntax modified to serve the svg
first:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
From http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
You may also take care of using the proper mime type for WOFF font , as of http://www.w3.org/TR/WOFF/#appendix-b
application/font-woff
to ensure proper handling by the browser