Someone please help me on this issue with #font-face. I have used this technique multiple times and for some reason I can not for the life of me figure out why the font-face is not rendering.
So I have a project called Web.Ui.Store in Visual Studio with two important subdirectories.
1. /Content/css/Typography.css
2. /Content/font/UTILITY-webfont.eot
(I have all the fonts provided by FontSquirrel but for explanation just labeling naming this extension.)
Now within the Typography.css I have these lines of code.
#font-face {
font-family: 'UtilityBoldCondensed';
src: url('file:///C:/dev/trunk/Source/Web.Ui.Store/Content/font/UTILITY-webfont.eot#iefix');
src: url('file:///C:/dev/trunk/Source/Web.Ui.Store/Content/font/UTILITY-webfont.eot?') format('embedded-opentype'),
url('file:///C:/dev/trunk/Source/Web.Ui.Store/Content/font/UTILITY-webfont.woff') format('woff'),
url('file:///C:/dev/trunk/Source/Web.Ui.Store/Content/font/UTILITY-webfont.ttf') format('truetype'),
url('file:///C:/dev/trunk/Source/Web.Ui.Store/Content/font/UTILITY-webfont.svg#UtilityBoldCondensed') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'LeagueGothicRegular';
src: url('C:\dev\trunk\Source\Web.Ui.Store\Content\font\League_Gothic-webfont.eot');
src: url('C:\dev\trunk\Source\Web.Ui.Store\Content\font\League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('C:\dev\trunk\Source\Web.Ui.Store\Content\font\League_Gothic-webfont.woff') format('woff'),
url('C:\dev\trunk\Source\Web.Ui.Store\Content\font\League_Gothic-webfont.ttf') format('truetype'),
url('C:\dev\trunk\Source\Web.Ui.Store\Content\font\League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.UtilityBoldCondensed { font-family: 'UtilityBoldCondensed', Arial, Sans-Serif; }
.LeagueGothicRegular { font-family: 'LeagueGothicRegular', Arial, Sans-Serif; }
I am confused as to why my "special"fonts won't load on my project. I have changed the relative path so many times today and still can not get it to render. I have narrowed the problem down to it being an issue with the relative paths for the locations of the files. Can someone help determine if this is correct.
As I can see on google's web-font; the #font-face is always inside a #media screen {}...
Check this out:
http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic
Related
I'm trying to get the Bebas Neue font to work, I've managed to convert my fonts into their respective types but whenever I load the font in the browser I get errors.
Firebug throws:
downloadable font: download failed
Chrome throws a 404 not found.
I initially had these in their own font folder, but I then decided to move the fonts to the same directory as the stylesheet I was using to try and rule out location problems.
This particular file is a SASS partial called _typography that lives in a folder called global this is the same folder I've directly placed all the fonts into as is.
#font-face {
font-family: 'BebasNeueRegular';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
With a 404 Error - it's 98% going to be because of the path being wrong.
Just a thought - you mentioned that you moved them into a SASS partial? Can this folder be accessed from the site? From my experience, your SASS is going to compile into some sort of public directory.
In order to troubleshoot... theoretically, you should just be able to add www.yourdomaincom/path-to-font/font.eot and come up with a download file.
If you're not, then it really is an issue of the path being where the error lies. As far as why other fonts are working, I wouldn't be able to say without taking a better look at how you have your project set up.
Just my two cents worth to help you troubleshoot!
Make sure your #font-face matches your font-family use on CSS, either:
font-family: 'Bebas Neue'; on everything or:
font-family: 'BebasNeueRegular'; on everything.
Like:
#font-face {
font-family: 'BebasNeueRegular';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
Matches css use:
.selector {
font-family: 'BebasNeueRegular', sans-serif;
}
Or:
#font-face {
font-family: 'Bebas Neue';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
Matches:
.selector {
font-family: 'Bebas Neue', sans-serif;
}
For a website I'm working on, the client wanted to use Roboto (by Google) as their main font. Several of the elements on the page use different styles of Roboto, such as Roboto Thin of Roboto Light. However, I have used the the #font-face selector to make the browser render the text in Roboto. My problem is that the design requires the use of different weights, not in the standard Roboto text. I'm not sure if I'm being clear enough. If you need clarification or a specific example, please ask.
PS: I found a similar thread about a similar problem, however, they use system fonts in conjuction with their #font-face. Using #fontface, how do I apply different styles to different font-families?
How do You Add Several font-faces to Separate Tags?
#font-face {
font-family: 'Crystal';
src: url('../fonts/crystalnormal.eot');
src: url('../fonts/crystalnormal.eot?#iefix') format('embedded-opentype'),
url('../fonts/crystalnormal.woff') format('woff'),
url('../fonts/crystalnormal.ttf') format('truetype'),
url('../fonts/crystalnormal.svg#crystalnormal') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'FreestyleC';
src: url('../fonts/freestyle.eot');
src: url('../fonts/freestyle.eot?#iefix') format('embedded-opentype'),
url('../fonts/freestyle.woff') format('woff'),
url('../fonts/freestyle.ttf') format('truetype'),
url('../fonts/freestyle.svg#freestyle') format('svg');
font-weight: normal;
font-style: normal;
}
foo {
font-family:FreestyleC;
}
bar {
font-family:Crystal;
}
In IE7 and IE8, when using a custom web font, text is sometimes rendered in italics, even when I explicitly set font-style: normal. The issue is sporadic - it will render fine a few times, then I refresh and everything is in italics, then I refresh and it's back to normal.
I'm using this #font-face declaration:
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
Theres a comment on this article that indicates it could be about the order of the #font-face declarations: however the only thing that stopped the problem was removing the italic declarations altogether.
Another Stack Overflow answer suggests using the Font Squirrel #font-face generator; I'm not able to do this however as the web font files I'm using have DRM.
Is there a way to solve this without completely removing the italic declarations?
UPDATE: Upon further investigation, it seems this issue affects IE8 as well, not just in compatibility mode.
For each of your #font-face font-family names, create a custom name instead.
Example:
#font-face {
font-family: 'DINnormal';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DINbold';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DINitalic';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DINboldItalic';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
After those CSS rules are defined, then you can include specific CSS rule:
li {
font: 18px/27px 'DINnormal', Arial, sans-serif;
}
If, like me, you came across this question while experiencing a similar issue using TypeKit fonts, this entry from the TypeKit blog explains how you can force unique font-family names for each weight & style of a TypeKit font to address it.
I was having a similar issue, web font was showing in Italic when using IE8(Emulator), after digging and digging I came across a article that suggest emulator can sometimes be misleading especially when it comes to webFonts, and what it suggested was trying the site in the actual IE8, as I am using a windows 7 machine i wasn't able to download the real thing so I used this site called http://www.browserstack.com/ (No testers or fake browsers. Test in real browsers including Internet Explorer 6, 7, 8, 9, 10 and 11.)
and i noticed my font was not italic anymore :D
Here's the link to the article i read,
http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/
Hope this helps you guys, if i came across something like this when researching it really would have saved me a few hours
Some time ago I asked this question and none of the answers solved my problem. My clients are complaining so I'm gonna try once again:
I published a new release of my webapp using #font-face with a limited version of "Droid Sans" (no Latin characters). The font files are hosted on my server. A week later I changed the font with a full version because most of my customers use Spanish language. The new customers get the new full font with no problem, but the customers who accessed first time with the limited font published don't get the special characters any more.
I guess the old font is cached somewhere in the browser, but I haven't been able to remove it.
I've tried to change the font name and the css definition for the browser to download again... nothing is working. Anyone knows how to fix this?
This is my css definition:
#font-face {
font-family: 'Droid';
src: url(/files/DroidSans.eot);
src: url(/files/DroidSans.eot?iefix) format('eot'),
url(/files/DroidSans.woff) format('woff'),
url(/files/DroidSans.ttf) format('truetype'),
url(/files/DroidSans.svg#webfontw7zqO19G) format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidBold';
src: url(/files/DroidSansBold.eot);
src: url(/files/DroidSansBold.eot?iefix) format('eot'),
url(/files/DroidSansBold.woff) format('woff'),
url(/files/DroidSansBold.ttf) format('truetype'),
url(/files/DroidSansBold.svg#webfontSOhoM6aS) format('svg');
font-weight: normal;
font-style: normal;
}
body, a, p, div, span, li, td, th, caption {
font-family: Droid, Optima, Calibri, Helvetica, sans-serif;
font-size: 10pt;
line-height: 14pt;
}
You said that you "tried to change the font name and the css definition". I would also try to change the font name AND resave the font file names, so
#font-face {
font-family: 'DroidBoldNEW';
src: url(/files/DroidSansBoldNEW.eot);
src: url(/files/DroidSansBoldNEW.eot?iefix) format('eot'),
url(/files/DroidSansBoldNEW.woff) format('woff'),
url(/files/DroidSansBoldNEW.ttf) format('truetype'),
url(/files/DroidSansBoldNEW.svg#webfontSOhoM6aS) format('svg');
font-weight: normal;
font-style: normal;
}
See if that works.
I am hoping someone can please point out what's not working about this font-face implementation. I've testing this using the body tag so there's no question as to whether the issue is with the HTML (yes, I do have a body tag.)
I have obtained the fonts and the implementation CSS from FontSquirrel. Thanks for looking at this!
CSS:
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('DymaxionScript-webfont.eot');
src: url('DymaxionScript-webfont.eot?#iefix') format('embedded-opentype'),
url('DymaxionScript-webfont.woff') format('woff'),
url('DymaxionScript-webfont.ttf') format('truetype'),
url('DymaxionScript-webfont.svg#DymaxionScriptRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: DymaxionScriptRegular, courier;
}
File tree structure:
Screenshot of Courier fallback font:
Answer: Apparently if one leaves "Regular" off of the font-family declaration, everything works fine. Answered my own question by playing with it.
Real Answer: My first "answer" only worked in Safari. What worked in all of them was changing "'DymaxionScript-webfont..." to '../DymaxionScript-webfont... After I did that, everything worked. It was bad pathing.
Here is a more concise #font-face implementation, that I know works across the board:
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('/path/to/font/webfont.eot?') format('eot'),
url('/path/to/font/webfont.woff') format('woff'),
url('/path/to/font/webfont.ttf') format('truetype'),
url('/path/to/font/webfont.svg#webfont') format('svg');
font-weight:normal;
font-style:normal;
}
For various web fonts you can check out google.com/webfonts which has a bunch of different fonts for use, but you just add a link to google's site and it will return the proper formatting for most browsers as far back as ie6
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: DymaxionScriptRegular, courier;
}