Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    16
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Font looking distorted on website

    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
    Last edited by ElysiaD; 07-27-2012 at 07:28 AM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,994
    Thanks
    15
    Thanked 233 Times in 233 Posts
    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.

  • Users who have thanked DrDOS for this post:

    ElysiaD (07-27-2012)

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    16
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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?

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    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” 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:
    Code:
    @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:
    Code:
    @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:
    Code:
    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.

  • The Following 2 Users Say Thank You to VIPStephan For This Useful Post:

    DrDOS (07-26-2012), ElysiaD (07-27-2012)

  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    16
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thank you VIPStephan for your help, I got it to work and the font looks excellent


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •