@font-face anti-aliasing on windows and mac

by

I too have been plagued with this on Chrome and I think I’ve just found the answer!

Chrome didn’t like the default fontsquirrel.com generated CSS. 

@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype'),
         url('/_styles/hlc/hl-webfont.svg#HLC') format('svg');
    font-weight: normal;
    font-style: normal;
}

To fix, i moved the SVG line:

url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')

to the top of the list. Now I see anti-alias fonts! I guess Chrome wants to be first…

/* THIS WORKS FOR ME */
@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
         url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Hope it works for you too. Enjoy!

More Related Contents:

  1. Using custom fonts using CSS?
  2. Are eot, ttf, and svg still necessary in the font-face declaration?
  3. CSS @font-face not working with Firefox, but working with Chrome and IE
  4. Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
  5. Why is @font-face throwing a 404 error on woff files?
  6. Wait for fonts to load before rendering web page
  7. Why should we include ttf, eot, woff, svg,… in a font-face
  8. @font-face EOT not loading over HTTPS
  9. Disable antialising when scaling images [duplicate]
  10. @font-face works in IE8 but not IE9
  11. CSS @font-face absolute URL from external domain: fonts not loading in firefox
  12. 3D CSS transform, jagged edges in Firefox
  13. @font-face src: local – How to use the local font if the user already has it?
  14. CSS @font-face – what does “src: local(‘☺’)” mean?
  15. Multiple font-weights, one @font-face query
  16. Webfont Smoothing and Antialiasing in Firefox and Opera
  17. Google warning: Resource interpreted as Font but transferred with MIME type application/octet-stream
  18. Fallback fonts on special characters
  19. CSS @font-face not working in IE8
  20. font-face with wrong MIME type in Chrome
  21. Internet Explorer @font-face is failing
  22. Non-Standard fonts in web?
  23. On IE CSS font-face works only when navigating through inner links
  24. Using @font-face with Rails 3.1 app?
  25. Downloadable font on firefox: bad URI or cross-site access not allowed
  26. Fix custom font line-height with CSS
  27. How to change an input button image using CSS
  28. Relationship between !important and CSS specificity
  29. Align two inline-blocks left and right on same line
  30. CSS selector (id contains part of text)

Leave a Comment