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;
Related
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'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>
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 having trouble with a drop-down menu from the Foundation framework in IE8 and I'm wondering if it is possible to hide an element if the user is using IE8.
Maybe making a simpler menu for IE users is easier than making the drop-down menu work.
Not that I approve of your solution ( fix it! ), but you can achieve what you're looking to achieve with conditional comments.
<!--[if IE 8]>
<style type="text/css">
#yourElemId {
display: none;
}
</style>
<![endif]-->