CODEWITHSUNDEEP
htmlcsssifrcufontypeface.js
Adamantus
Adamantus

Reputation: 821

Typeface.js: How do I know the name of the font I am adding?

I've converted some fonts using Typeface.js and the default font is working fine which is Century Gothic. But now I'm trying to use the Century Gothic Bold I uploaded and I don't know what the exact name is. I tried "Century Gothic Bold" but that didn't work. How do you know what the name is? The converter does not tell you or ask you to specify this during creation. Is it the filename?

I'm not going to upload any code as it's just a general question.

P.s. I should clarify that I know I can just add font-weight:bold but that would be the ordinary "Century Gothic" made bold rather than the "Century Gothic Bold" typeface which is a totally different thing. I already tried that and it looked terrible.

Upvotes: 0

Views: 349

Answers (1)

Ricardo Zea
Ricardo Zea

Reputation: 10283

@Adamantus Although not a specific technical answer, I have to say:

I used Typeface.js before as well. However, once web fonts gained traction and web font services emerged, I stopped using it. I was relieved.

To be honest with you, I think using Typeface.js is completely unnecessary by today's standards in every sense:

  1. Too much overhead trying to make it work. That's why you're posting here after all.
  2. Doing something with JavaScript that can very easily be done with CSS is the incorrect development approach.
  3. If you're using Typeface.js is because you're using a licensed typeface (not font) and Century Gothic is not a free typeface. This means you are still incurring in illegal use of the typeface, only the technology is different.

My honest recommendation is to look for a web font that's similar to Century Gothic and then implement it with @font-face.

Here's a forum here in SO exactly for that: https://stackoverflow.com/questions/19675667/alternative-google-web-font-for-century-gothic

And here you can find a @font-face Sass mixin that can make implementing the web font even easier: https://gist.github.com/ricardozea/9029840

Here's that mixin:

//@include fontFace(fontName, 'path/to/font'); » No need to specify the file extension in the "fontName" value

@mixin fontFace($font-family, $file-path, $weight:normal, $style:normal) {
    @font-face {
        font-family:$font-family;
        src:url('#{$file-path}.eot');
        src:url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
            url('#{$file-path}.woff') format('woff'),
            url('#{$file-path}.ttf') format('truetype');
        font-weight:$weight;
        font-style:$style;
    }
}

Usage:

@include fontFace(muli, '../fonts/muli');

Good luck.

Upvotes: 0

Related Questions