I'm having trouble figuring out why Arial Narrow is displaying correctly for some Firefox users on mac and not others. Here is the link: http://teknikor.bethmotta.com/ (see navigation font)
My code is:
font-family: "Arial Narrow", Arial sans-serif; font-weight:500;
font-stretch:condensed;
I even tried adding a font reset:
font-family: inherit; font-stretch:inherit; font-style:inherit;
font-family: "Arial Narrow", Arial sans-serif; font-weight:500;
font-stretch:condensed;
And I tried to target Firefox specifically:
#media screen and (-webkit-min-device-pixel-ratio:0){
ul.navcontainer li {
font-family: inherit; font-stretch:inherit; font-style:inherit;
font-family:"Arial Narrow", Arial, Helvetica, sans-serif; font-stretch:condensed;}
}
I'm not sure why it works for some Firefox mac users and not for others. All tested computers are operating Firefox 19. In the computers where Arial Narrow is not working the font is defaulting to Times not Arial.
I did notice that on the computers where it displaying correctly, Arial Narrow is installed in the user library as well as the system library. On computers where I am seeing Times, Arial Narrow is only in the system library, not the user library... however, Arial is installed in both, so why is the navigation defaulting to Times?
In general, does Firefox target fonts within the mac user library or system library?
Any other suggestions on how to fix this? Am I missing something simple?
Any help is greatly appreciated thanks.
OK, well I figured something out if anyone is interested. I added "arial" in lowercase to the stylesheet and Firefox defaulted to arial rather than Times.
You could try the following CSS3 rule:
#font-face { font-family: Arial Narrow;
src: url('ArialN.ttf'),
url('ArialN.eot'); /* IE9+ */
To make it work, you need to include the font file(!) to the appropriate folder.
Example of use:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face { font-family: Arial Narrow;
src: url('ArialN.ttf'),
url('ArialN.eot'); /* IE9+ */
}
div{font-family:Arial Narrow;}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 9+ only supports fonts of type .eot. Internet Explorer 8 and earlier, do not support the new #font-face rule.</p>
</body>
</html>
Related
I tried to embed fonts in my blogger website, but it didn't work when I tested it on another PC without the font installed on that PC.
This is my blog Address: ann24h.com
My font is locate in another hosting: http://kesor168.com/sub/font/
<style>
#font-face {
font-family: Khmer OS Dangrek;
src: url(http://kesor168.com/sub/font/Khmer_OS_Dangrek.eot);
src: url(http://kesor168.com/sub/font/Khmer_OS_Dangrek.ttf);
}
#font-face {
font-family: Khmer OS Battambang;
src: url(http://kesor168.com/sub/font/Khmer_OS_Battambang.eot);
src: url(http://kesor168.com/sub/font/Khmer_OS_Battambang.ttf);
}
</style>
Any idea how to fix my CSS?
You need your name value pairs to have proper syntax. The font-family property needs "Example Font Name" (single or double quotes are fine) not Example Font Name
You currently only have an .eot and .ttf font files. Which only support IE9 and Safari on Android or iOS. If you have an IE fix for your .eot file then perhaps you'll gain support for IE6 - IE8.
#font-face {
font-family: 'Khmer OS Battambang';
src: url('http://kesor168.com/sub/font/Khmer_OS_Battambang.eot');
src: url('http://kesor168.com/sub/font/Khmer_OS_Battambang.eot?#iefix') format('embedded-opentype'),
url('http://kesor168.com/sub/font/Khmer_OS_Battambang.ttf') format('truetype')
}
To apply it to your entire page:
html, body {
font-family: 'Khmer OS Battambang', sans-serif;
}
I have one example above, you can easily make your other font-face by using the example.
Edit: You asked what line would you add so it would work on Google Chrome
Answer: Add the two lines below
url('Khmer_OS_Battambang.woff2') format('woff2'),
url('Khmer_OS_Battambang.woff') format('woff'),
The 'woff2' applies to really new modern browsers.
The 'woff' applies generally to modern browsers.
Of course you'll need the .woff and .woff2 files in the same directory as your other fonts. Also in the example I provided I only specified the file, you'll need to specify the directory.
I'm creating a HTML template. I've attached the google fonts' link to the header of HTML file , It's showing okay in Chrome, But Firefox showing the Arial font instead. Firefox not taking the google fonts.
I'm using this link for font:
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
and the simple CSS
font-family: 'Cuprum', sans-serif;
font-size: 14px;
font-weight: 300;
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
I'm having trouble with my website's font rendering. The logo font renders correctly in chrome and safari but, not in firefox.
This is the css code:
#font-face {
font-family: 'Bello Pro';
src: url('./Bello Pro.otf');
}
.logo {
font-family: 'Bello Pro';
font-size: 40px;
font-weight: lighter;
}
Thanks in advance
Make sure your version of Firefox supports both #font-face, and your font format. You may also want to check the permissions, sometimes firefox won't render fonts according to origin policies, and/or certain formats.
You should use an online font converter and provide ALL formats of your font (otf, ttf, eot, woff, svg).
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.