Question

I’m importing some custom fonts in my rails app using the following lines in CSS:

@font-face
{
  font-family: "SquareSlabLite";
  src: url("/assets/squareslablite.ttf");
}

@font-face
{
 font-family: "SquareSlabBold";
 src: url("/assets/squareslabheavy.ttf");
}

@font-face
{
  font-family: "SquareSlabMedium";
  src: url("/assets/squareslabmed.ttf");
}

When I go to the location(s) localhost:3000/assets/font.ttf, I get the respective fonts showing up for download. However when I try and use the fonts for example:

h2{
  font-family: "SquareSlabLite";
  }

this line only works when I use SquareSlabBold. When I try use the Lite or Med versions of this text, I get nothing, just a generic font showing up. When I check out firebug, The bold shows up, but not the lite nor medium version. I’m baffled. I’ve checked spelling, redownloaded files but nothing.

Is it not possible to get this working with squareslab medium and lite? Could there be something wrong with the ttf files, even though I have downloaded them from different sources?

Thanks guys.

Answer 1

TTFs are not supported everywhere. And if you’re using IE for viewing this font, it is really hard to prepare TTF for this to work in every IE. Try http://www.fontsquirrel.com/fontface/generator/ to generate proper webfonts from yours TTFs.