can someone help me?

[fahadnabbasi]

I am loading .ttf font file and now I want to add in the weight and style for it but getPath only expects font size, is there a way I can define the weight and style for font? e.g.

Bold, Italic
or Bold, normal
or normal, normal

[fpirsch]

Hi,
there are no styles in fonts. You have separate font files for bold, light, italic etc.

[fahadnabbasi]

yes we have but it ttf we have definition of bold and italics, can't we somehow get that

[Jolg42]

Hi!

You can check in the OS2 table in font.tables

Maybe you will find something interesting with sFamilyClass or Panose…!

See official reference: https://www.microsoft.com/typography/otspec/os2.htm#fc
The head table have some infos too.

[fdb]

font.tables.os2.usWeightClass might be a good indication of font weight.

[fahadnabbasi]

yes I can get the weightclass but I want to change it so that if it was 400, I change it to 800 and it changes the font weight

[Jolg42]

You can directly read and write the font.tables.os2.usWeightClass value.

When exporting the font that value will be in the final .otf file see https://github.com/nodebox/opentype.js/blob/1b1679efa2047e54cab12580b3a6f879524e707f/src/tables/sfnt.js#L231

[fahadnabbasi]

ok I think I am not clear enough, I would really appreciate if you help me @Jolg42

I am using following

opentype.load(path_to_font, function(err, font)
{
var path = font.getPath(_char, left, top, decl.fontSize);
            path.fill = '#000000';
            path.draw(this.canvas.contextContainer);
}

Now here I want to define that use bold, use italic or use bold italic, something like this to get the exact output

can you please help me how to do that?
I tried changing the value font.tables.os2.usWeightClass to 800 but I guess it is never called as I am not doing any exports of the fonts etc, can you tell me how to do it?

[fpirsch]

@fahadnabbasi Like I said, you can't load a font and change the weight or style of the output path. If you want to use your_font_regular.ttf in bold, then load your_font_bold.ttf. But you cannot load a regular font and display its glyphs in bold. This is not how it works.

[fahadnabbasi]

oh the solution provided by @Jolg42 will not change the fontweight? currently for my font the value is 400, if I change it to 800, will it not work?

And if it doesn't work, how can I extract the different fonts from one single .ttf file?

The reason I am confused is because on html or canvas, if I use the same file, I can apply bold, italic and normal properties and they work fine but no way to do it using font.getPath function

[Jolg42]

Sorry @fahadnabbasi changing the font.tables.os2.usWeightClass will just change the value for the family, in your case it's not gonna help…

As @fpirsch said if you need multiple weights you will need to load each subfamily separately.

[Jolg42]

You can try to unpack your font with http://transfonter.org/ttc-unpack

[fahadnabbasi]

ok so is there a way I can extact that from .ttf? I don't have .ttc

[Jolg42]

You can try, maybe you have a .ttc named .ttf, that can happen!

[fahadnabbasi]

unfortunately this is not the case, so do I have to find all the different font files for every single font and all its sub families?

[Jolg42]

So yes, but you can also try to open your font in FontForge or FontLab & try to export the subfamilies.

[fpirsch]

@fahadnabbasi A standard .ttf file contains just one style. Basic fonts need 4 different files: regular, bold, italic, and bold-italic.

Browsers know where too look for the correct font file. Either you give them the correct file list in the CSS @font-face declaration, or they use font files installed locally, or they can sometimes fake bold and italic by just drawing a thicker or slanted path.

But this only works when you display text in your browser in the standard way, either with html or canvasContext.fillText or canvasContext.strokeText.

opentype.js doesn't do that. It only displays the glyphs as they are in the font file you provide. You really need multiple ttf files if you want multiple styles.

[fahadnabbasi]

thanks a lot for this information, you guys helped me a lot, will try and find all different font files now 👍
thanks a lot again for your help brothers :)
@fpirsch
@Jolg42
@fdb