Hi, I am using the Gnuolane font for a special text on a site (offline, not online) and everywhere it loads fine, except for Firefox. This is my CSS font kit setting: @font-face { font-family: 'Gnuolane'; src: url('gnuolane_rg-webfont.eot'); src: url('gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'), url('gnuolane_rg-webfont.woff') format('woff'), url('gnuolane_rg.ttf') format('truetype'), url('gnuolane_rg-webfont.svg') format('svg'); } I downloaded the Gnuolane font and made myself a FontSquirrel font kit. But the Firefox browser still shows Times New Roman.
Update, I rewrote the entire thing: @font-face { font-family: 'gnuolaneregular'; src: url('gnuolane-webfont.eot'); src: url('gnuolane-webfont.eot?#iefix') format('embedded-opentype'), url('gnuolane-webfont.woff') format('woff'), url('gnuolane-webfont.ttf') format('truetype'), url('gnuolane-webfont.svg#gnuolaneregular') format('svg'); font-weight: normal; font-style: normal; } This should be applied to a link type: a.blue:link{color: #7D7977; font-style: normal; font-weight: lighter; font-size: 10pt; font-family: arial, sans-serif; text-decoration: none;} a.blue:visited{color: #7D7977; font-style: normal; font-weight: lighter; font-size: 10pt; font-family: arial, sans-serif; text-decoration: none;} a.blue:hover{color: #B1AAA17; text-decoration: underline;} a.blue:active{color: #7D7977; font-style: normal; font-weight: lighter; font-size: 10pt; font-family: arial, sans-serif; text-decoration: none;} Filenames are as specified in the font-face. Identical. Don't know why Firefox is still displaying the TimesNewRoman.
I can't tell what the problem actually is, since these @font-face rules are automatically generated. The relative paths may not be correct, so test it with some other font file. However, what I can say is that the rules you apply to the anchor whom you add a class are a typical example of redundancy in CSS. If the class actually refers to the anchor, that "a" is not needed. In the other hand, if .blue is actually a class of some other type of element, I pray for your good that it's not a block-level one. And finally, if the anchor is a child of an element that has and id or a class, that blue class is not even needed. Speaking of which, this... a.blue:link{color: #7D7977; font-style: normal; font-weight: lighter; font-size: 10pt; font-family: arial, sans-serif; text-decoration: none;} a.blue:visited{color: #7D7977; font-style: normal; font-weight: lighter; font-size: 10pt; font-family: arial, sans-serif; text-decoration: none;} a.blue:hover{color: #B1AAA17; text-decoration: underline;} a.blue:active{color: #7D7977; font-style: normal; font-weight: lighter; font-size: 10pt; font-family: arial, sans-serif; text-decoration: none;} Code (markup): ...is functionally identical to this : a.blue:link, a.blue:visited, a.blue:active {color:#7D7977; font-style:normal; font-weight:lighter; font-size:10pt; font-family:arial, sans-serif; text-decoration:none;} a.blue:hover {color:#B1AAA17; text-decoration:underline;} Code (markup): For the sake of presentation and readability, you should write one rule declaration per line. Not that I have also stripped the white spaces between each and every property and value. This obviously won't fix your firefox issue. Give us some more information, and we'll dig into it.
Oh yes, it's simplified... but I guess it's basically the same setting for the "a". Any more ideas? Can't figure out what can cause this. File name not recognized by the CSS font-face setting?
Tried with a different font kit generator and it's not working. It is working separately on a "blank page", but it seems like something is interfering with my code. Not sure what causes it, something overrides it or what?
Uhm, you do realize in your sample code you don't actually declare the font you're trying to use, right? You have: @font-face { font-family: 'gnuolaneregular'; Code (markup): declaring the font-family... but then in the anchors you don't use it! font-family: arial, sans-serif; Code (markup): Do we SEE the problem here? Pretty obvious... ... and while wicker95 is right, it needs to be cut down, it should be cut down even FURTHER for pointless redundancies. In CSS when you have psuedo classes or child elements, declare all like values ONCE, use condensed properties where appropriate, and only re-declare values when they are DIFFERENT. Also, stop stuffing everything on one blasted line, it's one of the many ways people end up making stupid mistakes like saying the same thing over and over again... I also advise against using named font-weights other than bold, and if you're going to change the font-size, change the line-height... and you should probably be using %/em and not PT given how PT reacts inconsistently to the system metric... pt is for print, EM/% is for screen, px should be avoided like the plague. It's also an indication of bad coding practices to say 'blue' as a class since that's saying presentation in your markup -- WHY is it blue? Of course if they all have a common parent (but this is why CSS without the HTML it's applied to is gibberish) Keeping the .blue for now... I'd also apply :active and :focus your :hover state so people on keyboards aren't left out in the cold. a.blue { color:#7D7977; text-decoration:none; font:normal 100%/140% gnuolaneregular,arial,helvetica,sans-serif; } a.blue:active, a.blue:focus, a.blue:hover { color:#B1AA17; text-decoration:underline; } Code (markup): Oh, your hover color was also invalid... one too many digits. -- edit -- second bug Your saying font-weight:lighter ALSO would break it. Why? You say font-weight:normal in your @font-face so that's a mismatch.
Of course it won't work the font family isn't declared, but I figured that it's not what he actually has in his stylesheet : no browser can "guess" which font to use; so, how and why does it actually work in chrome, ie and opera? It may be a result of some weird form of property inheritance, but I get a severe headache only by thinking how his code may actually be. About that hover color, deathshadow is absolutely right, a hex code cannot have seven digits : thats why we call it hex code, and not hept code. However, I doubt that by #B1AAA17 he meant #B1AA17 : #B1AA17 is a nasty form of goldenrod, whereas #B1AAA1 is a grey nuance. While the latter is sort of compatible with the original color ( another grey nuance ), the former will make users "blow chunks".
Though it also illustrates one of my points -- it's called blue, when none of the color values are... well...
Yeah lol! I can't help laughing, but I also feel bad for people that suffer from protanopia: both the colors are actually blue for them.
Oh, that wasn't actually the exact HTML code that I was using. I copy-pasted the wrong code here. Not, it wasn't applied to Arial. It was a different <a> anchor to which I applied the font kit My real code in the CSS had no "arial", in fact had no font-family setting. That's why I told you FF was loading Times New Roman. If it had arial, it would have loaded arial. I guess I won't just paste "sample" codes, but the real actual codes to avoid confusion. So there was no "bug" in the real code. I have obscure codenames for classes, so I typed in the "blue" for an example here in the forum... Anyway, my real color with the right code actually this: #2188C9 And yes, it is blue. But the real names for these classes are ugly code names. OK, so what I've found is that it actually works ONLINE. It was offline that Firefox didn't load it OFFLINE. Not sure why this was happening.
It's fine now! And I swapped for CUPRUM. It's a great font. Looks delicious Looks very nice for linked titles.