I'm using http://www.fontsquirrel.com/fontface/generator to generate my font ready for web. I've set the options to include subsetting of the German language.
In the website I put this: Über WFW Deutschland but when viewed it comes out as Uber WFW Deutschland. Whats weird is that if I view in any IE version it shows correctly. If I switch to any default system font it also displays correctly in any browser.
How can I get my generated font to work correctly?
Update - CSS Code from generator:
#font-face {
font-family: 'PalatinoMedium';
src: url('../fonts/palatinm-webfont.eot');
src: url('../fonts/palatinm-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/palatinm-webfont.woff') format('woff'),
url('../fonts/palatinm-webfont.ttf') format('truetype'),
url('../fonts/palatinm-webfont.svg#PalatinoMedium') format('svg');
font-weight: normal;
font-style: normal;
}
After hours of fannying about I found that the option Apply Hinting - Improve Win rendering when ticked was breaking the font. Un-ticked that and reconverted my font and now the font is displaying as it should.
Although the font doesn't look as nice on Windows...
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;
}
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).
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}
i am currently building a website which i am using a custom font for. The font is not avaible # google webfonts, so i had to download the font and load it through #fontface.
I used the markup from the examples from the site where i downloaded the font.
Link to the font - http://www.fontsquirrel.com/fonts/Colaborate
heres the css markup
#font-face {
font-family: 'ColaborateRegular';
src: url('ColabReg-webfont.eot');
src: url('ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
url('ColabReg-webfont.woff') format('woff'),
url('ColabReg-webfont.ttf') format('truetype'),
url('ColabReg-webfont.svg#ColaborateRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The font works fine on the webpage , but to get to the problem.
I need to use swedish special characters Å Ä Ö - and they just get super weird on the webpage.
heres a image
http://oi44.tinypic.com/2r4tmo0.jpg
What could possibly be the problem? In the photoshop i've recieved from the designer they all look allright with the font.
Thanks!
The special characters aren't the characters of the font Colaborate, they are from the fallback font I suppose.
You need to make sure the package from fontsquirrel contains those special chars.
I see that your font set doesn't include those special chars and for this the browser uses your default font family. You should pick a set that supports them.
#font-face is kind of confusing as all the browsers cannot decide on a single file format to use. Below is what I am currently using to add 1 new font to a site, you can see there is 4 separate font files, I know that each one is because some browsers support different formats but does the browser download all the files or just the 1 that it needs?
#font-face {
font-family: 'Oswald';
src: url('oswald-webfont.eot');
src: url('oswald-webfont.eot?#iefix') format('embedded-opentype'),
url('oswald-webfont.woff') format('woff'),
url('oswald-webfont.ttf') format('truetype'),
url('oswald-webfont.svg#OswaldRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I would expect for a browser to download all fonts that it supports and than apply the latest only, just like with other css properties.
My expectation seems to be wrong though. On a site that embedded fonts with markup identical to what you've provided above, FF only downloaded the .woff file even though it supports .ttf/.otf as well.
FYI, the support matrix; individual formats are linked to at the bottom.