...

View Full Version : Resolved Font looking distorted on website



ElysiaD
07-25-2012, 11:43 AM
A while back I integrated a font using @font-face on a website. This font is used on the entire website, but now when I go on the website the font doesn’t look like it is supposed to look. Some of the letters are small and some are big. For example the rounded letters like the a, e or o's looks bigger than the s's or i's etc. It looks distorted. But the weird thing is when I zoom in the font corrects itself, but when I zoom out it looks distorted again. How do I go about fixing this problem?
Here is a link to the website http://www.joanoptom.co.za/index.html
You will see it clearly on the practice or services page under About us or on the Navigation bar.
The font being used is Caviar Dreams.

Thank you in advance for any help :)

VIPStephan
07-25-2012, 03:19 PM
The letter size looks OK to me but the font looks blurry, and this is because you are using font-weight: bold on a regular font (i. e. a typeface without bold font characters). The browser is using the regular font and making up some kind of faux bold to accomodate – same with italics, by the way. You should either include the files for the other styles/weights and reference them as such in @font-face declarations or not use these styles in your HTML.

DrDOS
07-25-2012, 03:31 PM
You're using Caviar Dreams ( a nice font ) and @font-face, which should be good, but what is wrong is that you're using only one face and asking the browser to fake the other faces. So the result depends on how well the browser fakes it. Make the @font-face css for all four faces and don't apply anything except font-family css to it and it should work properly. No font-weight, font-style, etc..

You see, I've been down that road myself.

ElysiaD
07-26-2012, 08:59 AM
Ok, so what I should do is make a @font-face declaration for caviar dreams bold and caviar dreams italic seperatly in my css? Where do I define the styles then and do I remove the font-weight and font-style from the @font-face or from my body, p, h1, h2 etc. tags?

VIPStephan
07-26-2012, 12:04 PM
There should be several font files for the different fonts (as seen on http://www.dafont.com/caviar-dreams.font). You create a font-face rule for each and upload them all to your server.

Now, there is a function called “style linking (http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/)” which means you can name the fonts in the font-face rule all the same (i. e. same font family) and only change the styles like so:


@font-face {
font-family: 'Caviar Dreams';
src: url('/css/caviardreams-webfont.eot');
src: url('/css/caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/caviardreams-webfont.woff') format('woff'),
url('/css/caviardreams-webfont.ttf') format('truetype');
}
@font-face {
font-family: 'Caviar Dreams';
src: url('/css/caviardreamsbold-webfont.eot');
src: url('/css/caviardreamsbold-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/caviardreamsbold-webfont.woff') format('woff'),
url('/css/caviardreamsbold-webfont.ttf') format('truetype');
font-weight: bold;
}
@font-face {
font-family: 'Caviar Dreams';
src: url('/css/caviardreamsitalic-webfont.eot');
src: url('/css/caviardreamsitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/caviardreamsitalic-webfont.woff') format('woff'),
url('/css/caviardreamsitalic-webfont.ttf') format('truetype');
font-style: italic;
}


Then, whenever the browser comes across an element that has, for example, font-weight: bold; applied (like the <strong> element by default), it will use the bold version of the font.

Internet Explorer (at least version 8 and lower), however, doesn’t support style linking yet and would still apply the “faux” style. This may not be very obvious with some fonts so you can either ignore it or create separate rules for IE, e. g. in an IE-only stylesheet served with conditional comments. The styles would look like this then:



@font-face {
font-family: 'Caviar Dreams';
src: url('/css/caviardreams-webfont.eot');
src: url('/css/caviardreams-webfont.eot?#iefix') format('embedded-opentype');
}
@font-face {
font-family: 'Caviar Dreams Bold';
src: url('/css/caviardreamsbold-webfont.eot');
src: url('/css/caviardreamsbold-webfont.eot?#iefix') format('embedded-opentype');
}
@font-face {
font-family: 'Caviar Dreams Italic';
src: url('/css/caviardreamsitalic-webfont.eot');
src: url('/css/caviardreamsitalic-webfont.eot?#iefix') format('embedded-opentype');
}

You see, a different name for each rule and none of the rules have any special styles (i. e. all are font-weight/font-style: normal).
And then you remove all (default) bold or italic styles and rather than specifying the font weight/style you specify the font family. For example:


strong {
font-weight: normal;
font-family: 'Caviar Dreams Bold', Arial, Sans-serif;
}
em {
font-style: normal;
font-family: 'Caviar Dreams Italic', Arial, Sans-serif;
}

The problem with this is that in case the font files aren’t loaded it reverts to a more common font but has no weight/style applied, i. e. everything looks “normal.” But this should be a minor issue.

ElysiaD
07-27-2012, 08:26 AM
Thank you VIPStephan for your help, I got it to work and the font looks excellent :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum