I've downloaded the kit of a font called Pompiere from fontsquirrel and uploaded the files.
The fonts show perfectly on Safari and Chrome, but on Firefox it won't show.
I have 4 unique fonts total that I use, does anyone know a possible reason as to why it's not showing up?
Here is a part of my css:
#font-face {
font-family: 'Pompiere';
src: url('fonts/pompiere/PompiereRegular.eot'); /* IE9 Compat Modes */
src: url('fonts/pompiere/PompiereRegular.eot?#iefix') format('embedded-opentype');
src: url('fonts/pompiere/PompiereRegular.woff') format('woff'), /* Modern Browsers */
url('fonts/pompiere/PompiereRegular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/pompiere/PompiereRegular.svg') format('svg');
}
#normal-font {
font-size: 23px;
font-family: 'Pompiere', Helvetica, sans-serif; }
Thanks guys, to anyone having the same issue, I got it working by:
Moving my 'fonts' folder to the root. (Before, it was inside my wordpress theme folder)
Directly linking my src url in the css. For example, 'http://yoursite.com/fonts/fontname.ttf' instead of '../fonts/fontname.ttf'
By doing those two things all of my fonts show up correctly on Safari, Chrome & Firefox. :)
I had a similar problem and fixed it by removing the .eot url
Related
So I have an #font-face setup that works in everything but firefox - a common occurance according to google.
Here's the quircky bit. If I set the font-weight to bold (in firebug) it will work, if I set it back to normal it will return.
If I edit the font-face in firebug it will work instantly - even if I put it back to what it was in the first place.
eg:
#font-face {
font-family: PlayBold;
src: url(Play-Bold-webfont.eot);
src: url(Play-Bold-webfont.eot?#iefix) format('embedded-opentype'),
url(Play-Bold-webfont.woff) format('woff'),
url(Play-Bold-webfont.ttf) format('truetype'),
url(Play-Bold-webfont.svg#PlayBold) format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
#testtext {
font-family: PlayBold;
}
Result: Not using the font.
Go into firebug and change anything in the font-face (even just replacing a character with the same character it used to have) and it starts working again.
Why doesn't firefox load the font-face properly in the first place?
Chromium 28, firefox 22.
When Gecko displays a page that uses web fonts, it initially displays
text using the best CSS fallback font available on the user's computer
while it waits for the web font to finish downloading. As each web
font finishes downloading, Gecko updates the text that uses that font.
This allows the user to read the text on the page more quickly.
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
THINGS TO TRY:
shuffling the font formats around, possibly putting the TTF or WOFF first
removing "font-variant: normal;" from the "#font-face" declaration because it doesn't belong there
properly quote the uri's in your css url(file.ttf) -> url('file.ttf')
~last resort~ use a data uri generator and embed the fonts into the CSS
src: url('data:application/octet-stream;base64,BLAHBLAHBLAH==') format('embedded-opentype'),
I'm facing a weird issue with chrome.
I'm loading a custom font with #font-face:
#font-face {
font-family: 'AlexBrushRegular';
src: url('AlexBrush-Regular-OTF-webfont.eot');
src: url('AlexBrush-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
url('AlexBrush-Regular-OTF-webfont.woff') format('woff'),
url('AlexBrush-Regular-OTF-webfont.ttf') format('truetype'),
url('AlexBrush-Regular-OTF-webfont.svg#AlexBrushRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I've used the Font Squirrel Font Face generator, with the demo page it works well.
But when i put this css and the font in my app (one-page app with require.js) , the page doesn't render. The font is correctly loaded (200 OK on the request) :
I think it's a chrome related issue because it works well with Safari.
I've tried loading my page without local server: file:///www/index.html, and it works in Chrome.
Any inputs appreciated.
Thanks.
Thibault
Seems it's fixed in the current version of Chrome
I have absolutely no succes in getting IE 10 to display custom fonts. Has anyone else a solution for this? I can see a few shout-outs on the net that others have trouble with their fonts in IE 10, but no solutions or confirmed bugs to be found.
Anyone with the same experience or solution?
This is what I have right now, and it works well in IE before 10, Chrome and Safari:
#font-face {
font-family: "LCD";
src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.ttf');
}
<!--[if IE]>
<style type="text/css">
#font-face {
font-family: "LCD";
src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.eot');
}
</style>
<![endif]-->
I have tried to substitute with font files in other formats woff, ott etc. but no luck at all with that.
The answer which hinted at font-squirrel made it Work.
Now the working markup (for IE 10) is:
#font-face {
font-family: "LCD";
src: url('/Public/Fonts/quartz_regular-webfont.eot');
src: url('/Public/Fonts/quartz_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/Public/Fonts/quartz_regular-webfont.woff') format('woff'),
url('/Public/Fonts/quartz_regular-webfont.ttf') format('truetype'),
url('/Public/Fonts/quartz_regular-webfont.svg#quartzregular') format('svg');
font-weight: normal;
font-style: normal;
}
I assume this is in an HTML file, due to the HTML comments and style elements...if not, look into that.
Beyond that, just use the #font-face generator
Is it possible that IE10 does not render web fonts if Security Mode is activated? After deactivating (internet options - security) my websites were displayed correctly ...
I had the font-squirrel #font-face working in everything but IE, myproblem though was that the .woff was the only thing not included in IIS mime-types on my server. That might help someone who's also ended up on this question.
I just came across a client reporting he was unable to see the webfont on his website. Ends up that the "High" security level (in IE options) blocks web fonts by default. You can create a custom security level that is basically "High" but still enables web-fonts. Or just turn it down to medium-high.
The font-face not updated on IE 10 -> reference , you can use it same IE-9
you can learn how use font-face here
i think you include all type of your font...
I used this here:
http://www.impressivewebs.com/ie10-css-hacks/
More specifically:
#media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
}
By using this we can just pop in a nice alternative font and still have sexyness in the other browsers with open fonts.
Try the fonts here:
http://cssfontstack.com
Must add that the fontface generator doesn't fix this for all fonts. When using the font Helvetica Neue Medium Condensed (HelveticaNeueLTW1G-MdCn) for instance. I'm using multiple fonts on a website. They all work with the fontface generator, except that Helvetica-font.
First off I would like to mention that I probably read 50 other topics on this problem but nothing I tried works for me.
I am using font-awesome-rails gem to integrate FontAwesome with my rails 3.1 app.
In Development, icons are loading fine in all 3 major browsers (FF, Chrome and IE7,8).
In Production (Heroku), icons are only loading in FF and Chrome. I get square boxes in IE7 & 8.
I can't really say if this is a browser issue because it works on my local machine, but also can't really say it is a deployment issue because it works in other browsers.
Any ideas?
Update:
Below is the CSS generated by asset pipeline. Notice how .woff and .tff files have digest hash appended to them, but that is not the case for .eot & .svg files. This could explain why fonts are not loaded on IE in production.
Is there anything I can do to fix this or is this something that the gem owner should fix?
#font-face {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
src: url("/assets/fontawesome-webfont.eot?#iefix") format("eot"),
url("/assets/fontawesome-webfont-2b313d88274b814fa936513279e62429.woff") format("woff"),
url("/assets/fontawesome-webfont-db4d858c72934d23138b334666f3787f.ttf") format("truetype"),
url("/assets/fontawesome-webfont.svg#FontAwesome") format("svg");
}
I added an additional style as such
#font-face {
font-family: "FontAwesome";
src: asset-url('fontawesome-webfont.eot', font);
font-weight: normal;
font-style: normal;
}
Rails correctly applies digest hash to this asset and IE picks it up.
I'm using a font called Gotham on my new website. It was not font-face ready, so I did that myself. It works fine on my Mac, and works fine too in my Windows machine in Chrome and Safari. But the font is not rendered smooth in IE and FireFox
See the images attached for the difference. (I can't post images yet because I'm a new registered user, so see this link for the screenshot: http://i45.tinypic.com/f35hqq.png
This is how it is set up. I think I did okay, because the fonts are shown in all browsers, just the rendering is not optimal in all of the Windows browsers.
#font-face {
font-family: 'gotham-light';
src: url('../fonts/gotham-light/gotham-light.eot');
src: url('../fonts/gotham-light/gotham-light.svg#gotham-light') format('svg'),
url('../fonts/gotham-light/gotham-light.woff') format('woff'),
url('../fonts/gotham-light/gotham-light.ttf') format('truetype'),
url('../fonts/gotham-light/gotham-light.svg#gotham-light') format('svg'),
url('../fonts/gotham-light/gotham-light.eot?#iefix') format('embedded-opentype');
}
Is there any way to fix this? Maybe a jQuery solution or something?
Have you included all necessary font types? Each browser recognizes different font formats. If you converted the font for use on the web using a service such as Font Squirrel: http://www.fontsquirrel.com/ then you should have been provided with each font type as well as some example CSS (below) to plug in. Make sure to include each format in your #font-face selector to optimize the font across all browsers:
#font-face {
font-family: 'gotham';
src: url('../font/gothamfont.eot');
src: url('../font/gothamfont.eot?#iefix') format('embedded-opentype'),
url('../font/gothamfont.svg') format('svg'),
url('../font/gothamfont.svg#gotham') format('svg'),
url('../font/gothamfont.woff') format('woff'),
url('../font/gothamfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Hope this helps! Gotham is a great font :)
EDIT: Windows has some issues with displaying fonts properly. I use Mac OS and Windows on a regular basis and notice many inconsistencies. I think you've done all you can do without intervention from the major browsers. Good luck!