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;
}
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'm having a problem with my fonts on server, in Chrome everything look great, but in Mozilla and IE font is not loaded.
I understand that problem is in Apache configuration. But I tried all solutions with adding mime types to .htaccess, to mime.type and apache2.conf; added mod_headers settings to .htaccess - nothing helped.
What could be the problem?
My CSS code is:
#font-face {
font-family: 'ProximaNovaCond-Reg';
src: url('../fonts/ProximaNovaCond-Reg.eot');
src: url('../fonts/ProximaNovaCond-Reg.woff') format('woff'),
url('../fonts/ProximaNovaCond-Reg.ttf') format('truetype'),
url('../fonts/ProximaNovaCond-Reg.svg') format('svg');
font-weight: normal;
font-style: normal;
}
URL: http://demo2.even.lv/
Thanks.
I am trying to load this custom font, and cannot get it to work on my server. I am just serving static files. This is the exact syntax I am using, and it works perfectly on my local machine.
#font-face {
font-family: "Telegrafico";
src: url('/assets/fonts/telegrafico.woff') format('woff'), url('/assets/fonts/telegrafico.eot') format('embedded-opentype'), url('/assets/fonts/telegrafico.ttf') format('truetype'), url('/assets/fonts/telegrafico.svg') format('svg');
}
The issues are in all browsers...I cannot figure out for the life of me what is wrong.
Any help is appreciated!
From our chat.
You are using a absolute URL in your CSS.
However on live your site is being served from a sub directory.
(The error here being a mismatch between the model of your local site and the live environment)
Solution is to use a relative path in your CSS instead of a absolute one.
So assuming /assets/css and /assets/fonts
#font-face {
font-family: "Telegrafico";
src: url('../fonts/telegrafico.woff') format('woff'), url('../fonts/telegrafico.eot') format('embedded-opentype'), url('../fonts/telegrafico.ttf') format('truetype'), url('../fonts/telegrafico.svg') format('svg');
}
Should suffice
I have implemented #font-face for a number of fonts on a website. This is an asp website hosted on IIS7. Currently I am testing with FF23, Chrome, IE8/9/10. I am having some difficulties with the fonts in IE. When I am not accessing the webpage from my server the fonts will render properly on FF and Chrome, however on all the IE browsers they will not. When I am accessing the website on the server(2008 r2) I am using the same URL(fully qualified domain name). When I am accessing not on the server I am using the same fully qualified domain name. Both the fonts and the website are hosted on the same machine(same domain). There are no errors thrown by #font-face in FF or Chrome, not sure how to check in ie.
#font-face {
font-family: 'sf_movie_posterregular';
src: url('./fonts/customtitle-webfont.eot');
src: url('./fonts/customtitle-webfont.svg#sf_movie_posterregular') format('svg'),
url('./fonts/customtitle-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/customtitle-webfont.woff') format('woff'),
url('./fonts/customtitle-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Add woff as a mine type to IIS. (.woff, application/font-woff)
Go to IIS Manager, and select your website, and choose MIME Types from the right.
After adding 'local' to the fonts, it worked accross all browsers.
#font-face {
font-family: 'sf_movie_posterregular';
src: url('./fonts/customtitle-webfont.eot');
src: local( 'sf_movie_posterregular'),
url('./fonts/customtitle-webfont.svg#sf_movie_posterregular') format('svg'),
url('./fonts/customtitle-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/customtitle-webfont.woff') format('woff'),
url('./fonts/customtitle-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
I rely heavily on Google Webfonts for my site and (unfortunatly) google chrome presents them badly, i have set font-smooth to always, but it dosen't seem to help.
EXAMPLES:
Is there any way i could smooth them / make them look better??
Thanks,
Font rendering problems are common in GChrome, try changing the order of your #font-face sources... Chrome utilises the .svg file in the #font-face sources, in some reason it doesn´t tolerate .svg being called last in the list
#font-face {
font-family: 'my-dirty-font';
src: url('../fonts/my-dirty-font.eot');
src: url('../fonts/my-dirty-font.eot?#iefix') format('eot'),
url('../fonts/my-dirty-font.woff') format('woff'),
url('../fonts/my-dirty-font.ttf') format('truetype'),
url('../fonts/my-dirty-font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
If the order #font-face order looks similar then try changing to
#font-face {
font-family: 'my-dirty-font';
src: url('../fonts/my-dirty-font.eot');
src: url('../fonts/my-dirty-font.eot?#iefix') format('eot'),
url('../fonts/my-dirty-font.svg') format('svg');
url('../fonts/my-dirty-font.woff') format('woff'),
url('../fonts/my-dirty-font.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Personally I would use
http://www.fontsquirrel.com/
It's all hosted on your server and it's compatible with nearly every browser! Since using Font Squirrel I haven't looked elsewhere.