Encountering issues with @font-face on Windows computers, regardless of the browser used. The fonts display properly on Linux and OSX.
Below is the CSS code I'm currently using (generated with font-squirel)
Review the screenshots for the identified problems:
- Fonts appear misaligned and 'dancing' on Windows, not properly aligned on the baseline.
- Fonts on Windows lack anti-aliasing.
Any suggestions or solutions? Your help is greatly appreciated.
Screenshots on OSX & Linux:
https://i.sstatic.net/lzHEn.png
(source: j3rn.org)
Screenshots on Windows:
https://i.sstatic.net/owQHk.png
(source: j3rn.org)
CSS code:
@font-face {
font-family: 'SchulbuchNordFett';
src: url(assets/fonts/schulbuchnord-fett-webfont.eot');
src: url('assets/fonts/schulbuchnord-fett-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/schulbuchnord-fett-webfont.woff') format('woff'),
url('assets/fonts/schulbuchnord-fett-webfont.ttf') format('truetype'),
url('assets/fonts/schulbuchnord-fett-webfont.svg#SchulbuchNordFett') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SchulbuchNordNormal';
src: url('assets/fonts/schulbuchnord-normal-webfont.eot');
src: url('assets/fonts/schulbuchnord-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/schulbuchnord-normal-webfont.woff') format('woff'),
url('assets/fonts/schulbuchnord-normal-webfont.ttf') format('truetype'),
url('assets/fonts/schulbuchnord-normal-webfont.svg#SchulbuchNordNormal') format('svg');
font-weight: normal;
font-style: normal;
}