@Font-Face Fonts Showing Blurred on MAC in Safari and Chrome

@font-face fonts showing blurred on Mac in Safari and Chrome

All browsers render fonts in a different way. Try -webkit-font-smoothing: antialiased; for Safari and see if it makes a difference. Also, try using relative length units.

Symbols in @font-face font are not displayed in Safari 5, are displayed correctly in Safari 6 and other browsers

Turns out Safari 5 does not show accents or symbols in SVG fonts.

It does show them when using TTF or WOFF fonts, but not in SVG.

Chrome or Safari 6 do not seem to have this problem.

I ended up fixing it by defining a separate font with @font-face, and then targetting Safari 5 with browser specific CSS. So:

/* Font-face for all browsers */
@font-face {
    font-family: 'MendozaRomanStd-Book';
    src: url('fonts/mendozaromanstd-book.eot');
    src: url('fonts/mendozaromanstd-book.svg#mendozaromanstd-book') format('svg'),
         url('fonts/mendozaromanstd-book.eot?#iefix') format('embedded-opentype'),
         url('fonts/mendozaromanstd-book.woff') format('woff'),
         url('fonts/mendozaromanstd-book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

    /* Safari5 fix */
@font-face {
    font-family: 'MendozaRomanStd-Book2';
    src: url('fonts/mendozaromanstd-book.ttf') format('truetype') !important;
    font-weight: normal;
    font-style: normal;
}

.safari5 body {
font-family: 'MendozaRomanStd-Book2', Times new roman, serif;
-webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
-webkit-text-stroke: rgba(255,255,255,0.01) 0.1px;
}

Please note that this code already contains a fix to enable correct rendering of webfonts in Chrome under PC. With the standard fontsquirrel generated code, this leads to horrible jaggyness and not aliased fonts. Until Google can get its act together, a fix is to elevate the SVG file to the top.

@font-face problem with font-weight in Safari

As explained here, you have to add

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

inside the @font-face declaration and then use the font-weight:600; on your anchor.

halvetica bold @font face not working in chrome and safari in mac

You can Try helvetica-bold.eot, .woff and .svg font along with .ttf in font-face.

There are many sites which are converting .ttf font to .eot and other types (you can google it)

so your new code will be -

@font-face {
 font-family: 'helvetica-bold';
 src: url('helvetica-bold.eot'); /* IE9 Compat Modes */
 src: url('helvetica-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('helvetica-bold.woff') format('woff'), /* Modern Browsers */
   url('helvetica-bold.ttf')  format('truetype'), /* Safari, Android, iOS */
   url('helvetica-bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

---

Related Topics