Variable fonts

[Karellen]

I am attempting to embed the Quicksand font into an epub3 file, to use on headings and the title page.
https://fonts.google.com/specimen/Quicksand

I note that it is a "Variable" font which contains all the font styles in a single file.

When using it in the epub3 on a Libra2, the styling defaults to "Light" instead of the needed "Bold" and I cannot access any heavier modes.

Is this because the Libra2 does not handle variable fonts?
Surprisingly I couldn't find an answer here on the forum or the fonts wiki page.

[RbnJrg]

Originally Posted by Karellen

I am attempting to embed the Quicksand font into an epub3 file, to use on headings and the title page.
https://fonts.google.com/specimen/Quicksand

I note that it is a "Variable" font which contains all the font styles in a single file.

When using it in the epub3 on a Libra2, the styling defaults to "Light" instead of the needed "Bold" and I cannot access any heavier modes.

Is this because the Libra2 does not handle variable fonts?
Surprisingly I couldn't find an answer here on the forum or the fonts wiki page.

Not all devices support variable fonts. But to set the bold style, try:

font-weight: 800;

If you want normal weight, try:

font-weight: 400;

And if you want to set a "light" weight, then try:

font-weight: 300;

Maybe there is a font definition that is overwritting your new style. If the above doesn't work, try adding the !important sufix.

Kobo Libra should support variable fonts; try with .kepub extension instead of .epub.

[Karellen]

Thanks @RbnJrg
I have tried both the normal "Bold" and a weight number. While both work in the Editor viewer, they don't show in the Libra 2.

I noticed that when I added @font-face in the stylesheet, Calibre automatically defaulted to the "light" weight.

PHP Code:

@font-face {
  src: url(OEBPS/Quicksand-Light.otf);
  font-family: "Quicksand Light";
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  } 


But if I try and edit the font-weight to "bold" or 800, then the checkers in Calibre have a fit and it still shows as Light in Libra 2.

I'll try the !important suffix.

[JSWolf]

Originally Posted by Karellen

Thanks @RbnJrg
I have tried both the normal "Bold" and a weight number. While both work in the Editor viewer, they don't show in the Libra 2.

I noticed that when I added @font-face in the stylesheet, Calibre automatically defaulted to the "light" weight.

PHP Code:

@font-face {
  src: url(OEBPS/Quicksand-Light.otf);
  font-family: "Quicksand Light";
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  } 


But if I try and edit the font-weight to "bold" or 800, then the checkers in Calibre have a fit and it still shows as Light in Libra 2.

I'll try the !important suffix.

There is a better solution that works. In the ZIP file for Quicksand from the link you posted is a directory titles static. It contains the following fonts...

Quicksand-Bold.ttf
Quicksand-Light.ttf
Quicksand-Medium.ttf
Quicksand-Regular.ttf
Quicksand-SemiBold.ttf

Just pick the ones you want to embed based ont he weight of the font.

This is how you do the CSS for the fonts.

@font-face {
  font-family: Quicksand;
  font-weight: bold;
  font-style: normal;
  src: url(../fonts/Quicksand-Bold.ttf);
}

[Karellen]

Originally Posted by JSWolf

There is a better solution that works. In the ZIP file for Quicksand from the link you posted is a directory titles static. It contains the following fonts...

Quicksand-Bold.ttf
Quicksand-Light.ttf
Quicksand-Medium.ttf
Quicksand-Regular.ttf
Quicksand-SemiBold.ttf

Just pick the ones you want to embed based ont he weight of the font.

Oh, geez. I feel like such an idiot. I just extracted the Quicksand_VariableFont_wght.ttf file. I didn't even look in the Static folder as I just thought it contained some publishers documents. Teach me to not be curious and not poke around!!

Issue solved. Thanks @JSWolf

[JSWolf]

Originally Posted by Karellen

Oh, geez. I feel like such an idiot. I just extracted the Quicksand_VariableFont_wght.ttf file. I didn't even look in the Static folder as I just thought it contained some publishers documents. Teach me to not be curious and not poke around!!

Issue solved. Thanks @JSWolf

You are very welcome.