Variable Font can be used?

[albertoguerra]

Hi there!
I'm new to Laytheme, but i'm trying to understand all the potentiality : )

Can variable font be used in laytheme?
In particular for some hover effect using the font-variation-settings ?

Thanks in advance for any tip!

Alberto

[Richard]

Dear @albertoguerra

Just to clarify, when you refer to variable fonts, do you mean:

Variable fonts where you control the weight and scale
https://v-fonts.com/

Or font-variables where you have access to an OTF's additional styleset's such as glyphs, extra symbols and additional font options.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values

And i will try to help from there :)

Best wishes and have a wonderful day

Richard

[albertoguerra]

Thanks!
I mean variable fonts to control weight or any axes in the design space, variable fonts as variable fonts : )

So, for example to have, axis activation in hover (like this from my webiste: albguerra.it), or to simplify the decision of a weight using a font-variation-settings instead of light bold etc.

The first example is what i want to reach, if it is possible btw!

Best
A

[Richard]

Dear A @albertoguerra

I do not believe this is possible at this point in time, apologies for this,
however i would be happy to include this is the development notes for future discussion.

I will also continue to see if this is possible with some workaround and if i have success i will keep you posted, i am curious as well if this can be achieved.

Best wishes and i will update if i succeed :)

Sincerely
Richard

[clrcrtq]

hey everyone

just experiencing the same problem. have to write a custom css for each, which is a bit annoying ;)

it would be really great if there could be some sort of switch in the laytheme options to disable font-weight and instead use font-variation-settings "wght". this way no new entry in the database needs to be made, just the css output changes from

font-weight:$fontWeight;

to

font-variation-settings:"wght" $fontWeight;

The original font-weight could just be left on 400 and since this variable is no longer needed, it can be used for font-variation-settings "wght".

I tried to change this in the actual laytheme code, but i did not quite succeed yet, so doing class based CSS workaround is the quickest fix for it yet.

but maybe implementing that little switch in the options wouldn't be too much to ask for a future update? :)

all the bests
martin

[Richard]

Dear Martin @clrcrtq

Awesome, thank you so much for this work around also yeah really good to hear your thoughts on the subject. Since the inception of Lay Theme variable fonts and other things like stylistic sets etc have become so widely used i agree an update would be great :)

Armin Currently is working full time on Woo-commerce support for Lay Theme so this change is likely not to occur in the next few months, but i am putting this into the development notes.

Please let me know if you have any further questions, Thank you for this post and for using Lay Theme in 2021

Best
Richard

[markHighLow]

Hey Richard,
just wondering if there's been any further development here.
Was hoping to use one of the Dinamo Css codes - https://abcdinamo.com/news/using-variable-fonts-on-the-web
to showcase some type work on one of my pages (specifically with the user interactions code they have written).
Thanks.

[Richard]

Dear @markHighLow

Please note they are supported as stated in Lay Theme's version history:

3.9.0 - 13 September 2021
Support for Variable Fonts. Upload a variable font as a .ttf in "Lay Options" → "Webfonts". Now in "Textformats" choose that font for a Format and use the variable font sliders!

If not what you're looking for I can provide some Links i know of that may help you implement it.

http://laythemeforum.com:4567/topic/917/activate-styllistic-sets/6

http://laythemeforum.com:4567/topic/6476/font-encoded-in-base64/4

http://laythemeforum.com:4567/topic/6206/webfont-issue-2-fonts-working-fine-3rd-one-doesn-t

---

Best

Richard

[markHighLow]

Thanks Richard. Got the ttf file loaded but didn't see any variable font sliders in the "Textformats" so will have to try out some of those other methods you suggested. I have limited coding experience so this might be too ambitious for me. Cheers though for the suggestions.

[Richard]

Thanks for the update @markHighLow good luck! ⭐️

[markHighLow]

@Richard Thanks Richard. Took a bit of playing around but starting to get there. Your first suggestion referencing the Text formats was the key.
Still got some finessing to do but really pleased with how it's taking shape. Much appreciated. M
https://www.markevans.design/typography/