#1
  1. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,868
    Rep Power
    368

    Font dont appear correctly in chrome.


    I have been searching around and found this to be an issue for lots of people. I have tried implementing different proposed solutions and none of them have worked so far.

    Can someone please give me a solution?

    Code:
    @font-face {
        font-family: 'gotham_light';
        src: url('fonts/gotham_light/font.eot');
        src: url('fonts/gotham_light/font.eot') format('embedded-opentype'),
        url('fonts/gotham_light/font.svg') format('svg');
    	 font-weight: normal;
        font-style: normal;
    }
    
    /*if mozilla*/
    @-moz-document url-prefix() { 
        @font-face {
            font-family: 'gotham_light';
            src: url('fonts/gotham_light/font.ttf') format('truetype');
        }
    }
    This is the latest solution I got off the net. I have tried:
    1. moving the svg lines to the top,
    2. using font-weight etc
    3. text shadow
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Don't change the @font-face rule. This is what I would use:
    Code:
    @font-face {
    	font-family: 'gotham_light';
    	src: url('fonts/gotham_light/font.eot'); /* IE9 Compat Modes */
    	src: url('fonts/gotham_light/font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    	  url('fonts/gotham_light/font.woff') format('woff'), /* Modern Browsers */
    	  url('fonts/gotham_light/font.ttf') format('truetype'); /* Safari, Android, iOS */
    	font-weight: 300;
    	font-style: normal;
    }
    Have you tried the text-stroke and text-shadow techniques?
    http://stillab.tumblr.com/post/18627...ment-in-webkit
    http://www.niteodesign.com/web-desig...ont-rendering/

    By the way, I recommend avoiding the use of SVG fonts with @font-face. SVG fonts tend to have big files, don't support hinting, and, at least in general, mobile devices support more font formats these days. More info.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo