0

So I am developing a website and for some reason in Chrome fonts are not displaying correctly on my main server (where I host fonts on same server) but on another test server (where fonts are hosted externally) they are.

enter image description here

ORIGINAL SERVER

/*Museo Sans 100*/
@font-face {
    font-family: 'museo_sans';
    src: url('http://www.domain.com/fonts/museosans-100-webfont.eot');
    src: url('http://www.domain.com/fonts/museosans-100-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.domain.com/fonts/museosans-100-webfont.svg#museo_sans100') format('svg'),
         url('http://www.domain.com/fonts/museosans-100-webfont.woff') format('woff'),
         url('http://www.domain.com/fonts/museosans-100-webfont.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;

The only difference is that on server 1 fonts are hosted on same site while on the server 2 they are loaded externally from another domain.

How can I fix this and what is the best way to self host fonts without any problems?

user3187469
  • 1,461
  • 7
  • 23
  • 31

1 Answers1

0

Are you loading the external typefaces from another provider on the server that it is working on (Typekit, etc)? Chrome has been known for having strange font aliasing. Sometimes this can be fixed with this:

body {
    -webkit-font-smoothing: antialiased;
}

Here is one thread that covers it more in depth.

Community
  • 1
  • 1
Ross Edman
  • 798
  • 5
  • 14