I'm currently working on a little Project in which I'd like to use webfonts via @fontface.
I implemented the font's like this:
@font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
font-weight: normal;
font-style: normal;
Now as you have probably experienced Chrome has problems displaying these fonts in a smooth way.
After some searching I found a solution which seem to work: You simply move this part of the css:
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
So you end up with this:
@font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
Now Chrome renders the Fonts in a smooth way, which is great.
BUT:
For some reason this SOMETIMES breaks the Layout. About each third time I load the page I'll get something like this:
Everything is moved to the left. Longer texts are breaking out of their containers. Looks really strange.
**Has anyone experienced this problem before?
I would be happy to get advice on this.**
Feel free to take a look for yourself: View Fireflycovers.com online
Thanks a lot!
I have had this exact issue happen to a website of my own.
Instead of putting the svg at the top, keep the original formatting but add a media query as shown below. This will make chrome render the fonts perfectly and fixes the layout breaking.
@font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
}
}