The problem is the whole website doesn't show text until I inspect element with Chrome. It all works fine on other browsers.
I don't have any chrome extensions installed and am using an incognito window, but still nothing.
The website passes validation via W3C - the site is: http://www.toricks.com
I'm using #font-face, which by looking at it seems to be setup fine!
Can anyone shed any light on this?
You can try the Font Squirrel way of adding the #font-face like this:
#font-face {
font-family: 'Comfortaa';
src: url('comfortaa.eot');
src: url('comfortaa.eot?#iefix') format('embedded-opentype'),
url('comfortaa.woff') format('woff'),
url('comfortaa.ttf') format('truetype'),
url('comfortaa.svg#comfortaanormal') format('svg');
font-weight: normal;
font-style: normal;
}
I think this has the best cross-browser support. Make sure you convert your font to all the different types (you can do that with the Font Squirrel generator).
Related
We're currently building a website for a large audience and most of the test users are using Windows. They noticed a very distorted font rendering, see Screenshot:
I tried some "fixes" I could find, like adding a subtle text-shadow, using zoom: 1 and/or setting translateZ(0). I also tried using filter and font-smoothing properties, but the font is not getting better.
I'm using a font-face (Texta Narrow). Firefox on Windows looks even worse than IE9.
Is there any way to smoothen the text at least a little, or is my only option to use another font?
If you're using font-face in your website, so you should to change the font-face declaration/format, like this.
font-family: 'fontName';
src: url('fontName.eot');
src: url('fontName.svg#fontNameID') format('svg'),
url('fontName.eot?#iefix') format('embedded-opentype'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I'm having an issue with #font-face in my site with two browsers: Firefox and Chrome.
In Firefox the #font-face rule just doesn't work, it uses the fallback font —Helvetica—
I have declared the font like this at the top of my stylesheet:
#font-face {
font-family: 'pf_centro_sans_proregular';
src: url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.eot');
src: url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.eot?#iefix') format('embedded-opentype'),
url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.woff') format('woff'),
url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.ttf') format('truetype'),
url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.svg#pf_centro_sans_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
If I type the URI in the browser it download the font without problem, so, the font is there (Opera and Safari displays the site with the right font)
In Chrome suddenly (with some update I guess) the menu changed to the fallback font, yes, just the menu, the rest of the site behaves as expected.
I know the font is there and my CSS shouldn't be that bad because it works in Safari (both, desktop and mobile) and in Opera.
Any hints with this?
Thank you for your time and help.
It should just be a matter of changing the font url from http://fonts.googleapis.com/css to https://fonts.googleapis.com/css to secure this link.
#font-face {
font-family: 'advertisingmediumregular';
src: url('fonts/advertisingmedium-webfont.eot');
src: url('fonts/advertisingmedium-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/advertisingmedium-webfont.woff') format('woff'),
url('fonts/advertisingmedium-webfont.ttf') format('truetype'),
url('fonts/advertisingmedium-webfont.svg#advertisingmediumregular') format('svg');
font-weight: bold;
font-style: normal;
}
the text disappear in google chrome when I wrote this code can anyone help me please
I already had the same problem. I was adviced to generate my web fonts with a tool like the FontSquirrel webkit fonts generator. Upload your font's files and download back a all browsers compatible pack. Include the css in your HTML page in addition to yours. And it seems to work since I do like this. I hope it will be the same for you.
I am using a custom font-family with following css rule:
#font-face {
font-family: 'matrix';
src: url('MaSGRgLn.eot');
src: url('MaSGRgLn.eot?#iefix') format('embedded-opentype'), url('MaSGRgLn.woff') format('woff'), url('MaSGRgLn.ttf') format('truetype'), url('MaSGRgLn.svg#MatrixScriptGr-RegularLin') format('svg');
font-weight: normal;
font-style: normal;
}
I have transformed my main font to all alternatives to be sure. Those work fine for all browsers except for ie < ie9. Is there sth i am missing or haven't paid attention to?
One important thing to note, based on my tests, is that the font-family name must match that what is inside the EOT file (viewable with hex-editor or if you have a matching TTF and Windows, the font preview will tell you).
IE8 does not display your font if the name differs, IE9 (even in IE8 mode) doesn't have this problem.
In your case, the SVG version has the name "MatrixScriptGr-RegularLin". Try using the same name in you CSS #font-face font-family definition.
I have a site where the font face usually works, even in ie.
But in firefox letters are jagged and ugly, I think a rendering problem. In firefox the MAC functions normally, as in other browsers. I tried to solve a lot of ways without success.
Can anyone help me?
link to the image
#font-face {
font-family: 'Myriad Pro';
src: url('myriadpro-regular.eot');
src: url('myriadpro-regular.eot?#iefix') format('embedded-opentype'),
url('myriadpro-regular.woff') format('woff'),
url('myriadpro-regular.ttf') format('truetype'),
url('myriadpro-regular.svg#myriadpro-regular') format('svg');
font-weight: normal;
font-style: normal;
}
Sorry to bother you but as far as i know you can't use Adobes font in websites, well technicaly you can't use them on anything, that will allow other people to access the font (i could for example use you Myriad Pro font just by fooling around firebug).
As far as your project is hiting live, anyways hope my info helps.