CSS - Unable to use downloaded fonts

Question

There are 2 particular fonts that are pre-installed. They render fine in Chrome, but not in Firefox. So I included the fonts using @font-face so they would be downloaded.

CSS:

@font-face
{
  font-family:Elephant;
  src:url('/Styles/Fonts/elephant.ttf');

  font-family:Harrington;
  src:url('/Styles/Fonts/Harrington.ttf');
}

.title
{
  font-family:Elephant;
}
.title2
{
  font-family:Harrington;
}

They still don't work in Firefox. What do I need to do?

could you plz give an example. Also how about other browsers. — Ruby, Mar 11 '14 at 07:28
Use http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax and convert the multiple font types with http://www.fontsquirrel.com/tools/webfont-generator — Ming, Mar 11 '14 at 07:29
hmmmm maybe.. but still he is missing the rest of font vaiants — Jorge Y. C. Rodriguez, Mar 11 '14 at 07:30
go to fontsquirrel.com/fontface/generator and download the package with all the required font type and files — Jorge Y. C. Rodriguez, Mar 11 '14 at 07:33
Thank you everyone. @chris answer worked for me. guess what ..in IE too.. — Ruby, Mar 11 '14 at 07:36

Hamed mayahian · Answer 1 · 2014-03-11T07:53:30.977

your download font links should be like so:

@font-face
{
    font-family: 'elephant';
    src: url('/Styles/Fonts/elephant.eot?#') format('eot'), /* IE6–8 */
    url('/Styles/Fonts/elephant.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Styles/Fonts/elephant.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

you can use Web Font Ganarator to Convert your font to Woff and eot and svg format

score 0 · Accepted Answer · answered Mar 11 '14 at 07:29

0

The main problem is that you need to have a separate @font-face rule for each font that you import/download for use in CSS:

@font-face {
  font-family: "Elephant";
  src: url("/Styles/Fonts/elephant.ttf");
}

@font-face {
  font-family: "Harrington";
  src: url("/Styles/Fonts/Harrington.ttf");
}

answered Mar 11 '14 at 07:29

Chris

26,544
5
58
71

that will not work, since `.ttf` font family are for Safari, Android, iOS – Jorge Y. C. Rodriguez Mar 11 '14 at 07:32
1

@jycr753 See the link above. If that's not enough, here's a webpage from the Mozilla Developer Network where they use a `.ttf` in their example: [tiny little link](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face). – Chris Mar 11 '14 at 07:36
yeah but still, that will only work for new browsers.. why dont respond the OP pointing to the right way declaring all needed parameters. http://stackoverflow.com/questions/11002820/why-should-we-include-ttf-eot-woff-svg-in-a-font-face – Jorge Y. C. Rodriguez Mar 11 '14 at 07:39
either way... is good fun mate, but im in class ;) so lets agree to disagree – Jorge Y. C. Rodriguez Mar 11 '14 at 07:40
2

@jycr753 I don't mean to repeatedly challenge you or anything, but you are (again) incorrect. TTF support in Firefox dates all the way back to version 3.5 and Chrome supported it for as long as it's been around. Only browser that has issues is IE in its older versions. Have fun in class. – Chris Mar 11 '14 at 07:42
Maybe, i will look at it later ;) is always good to learn :) plus is fun ... thanks mate i will @Chris – Jorge Y. C. Rodriguez Mar 11 '14 at 07:43

score 0 · Answer 3 · answered Mar 11 '14 at 07:33

On Firefox, you should write this way:

@font-face {
font-family: ‘FONT’;
src: url(‘FONT.eot’);
src: url(‘FONT.eot?#iefix’) format(‘embedded-opentype’),
url(‘FONT.woff’) format(‘woff’),
url(‘FONT.ttf’) format(‘truetype’),
url(‘FONT.svg#FONT’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

While FONT is your font, Elephant or Harrington.

CSS - Unable to use downloaded fonts

3 Answers3