Safari and Ie Can't Read Ttf and Eot Fonts

Safari and IE can't read TTF and EOT fonts

You should check Paul Irish's Bulletproof @font-face Syntax or FontSpring's @font-face Syntax which needs multiple declarations of the the same font in different file types to server multiple browsers.

The basic declaration is like

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
   url('myfont-webfont.woff') format('woff'), 
   url('myfont-webfont.ttf')  format('truetype'),
   url('myfont-webfont.svg#svgFontName') format('svg');
}

I also prefer FontSquirrel's @font-face Generator but you can Google other alternatives. FontSquirrel just needs one font to be converted and it will provide you with a basic .zip file that contains necessary font types plus a sample demo of the fonts generated.

Font Face not working completely in Safari

I had this problem before. what happens is that the ttf fonts do not usually work well on mac / safari

Safari and IE can't read TTF and EOT fonts

@font-face - how to make it work on all browsers

Firstly, you don't have the copyright to embed most fonts - anyone can download them, so it's no different to putting the font on your server for someone to download.

My advice would be to use the font squirrel tool found here: http://www.fontsquirrel.com/fontface/generator to generate the files and the code for you.

Be careful not to share fonts you don't have the rights to do so with.

Any advantage to using SVG font in @font-face instead of TTF/EOT?

It seems to be the only way to use web fonts on Mobile Safari. So that's a pretty big advantage if you're developing for iPhones and iPads. Font Squirrel's @font-face generator can create the appropriate SVG file and CSS syntax from any OpenType font.

Fonts broken in Chrome and Firefox but works good in Safari

It looks like you have two @font-face declarations for the "same" font. One is in MyFontsWebfontsKit.css which references a font as "Elizabeth-Italic". The other declaration, in uaf.css is referencing a font as "Elizabeth Italic". These are two distinctly different fonts.

Assuming you want the italicized font, just set the font-family to "Elizabeth-Italic" and you should be good to go.

I'd recommend removing any of the CSS files you don't need (particularly @font-face declarations), it will lessen the number of HTTP requests and make the site a bit snappier overall.

font-face not working in IE 10

I assume this is in an HTML file, due to the HTML comments and style elements...if not, look into that.

Beyond that, just use the @font-face generator

@font-face not working on chrome but works on other browsers

Simplest supported loading of a font on the web today. Only need one font file and it needs to be used.

Two CSS rules and a HTML tag.

Microsoft was the holdout for TTF although they were part of building the TTF. All systems have the license to use TTF and caniuse reports all browsers supporting it.

Note this does not mean you can use anybodies licenced font. It means you can use TTF to display the font.

OTF is open license so no license is required and supported by all systems including Microsoft edge.

Not sure of the status of Woff and SVG is not supported by Chrome.

@font-face {
  font-family: "Logo";
  src: url("/fonts/logo.ttf"); /* or url("/fonts/logo.otf") */
  }
.logo {
  font-family: Logo;
  font-size: 80px;
  font-weight: normal;
  }

<h1 class="logo">

Browsers don't download the font until they need to use the font. But the font can be downloaded with Javascript if one does not like the normal behavior.

---

Related Topics