• Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

Variable Font can be used?

Scheduled Pinned Locked Moved General Discussion
11 Posts 4 Posters 176 Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    albertoguerra
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
  • RichardR Offline
    RichardR Offline
    Richard Global Moderator
    wrote on last edited by
    #2

    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

    1 Reply Last reply
    0
  • A Offline
    A Offline
    albertoguerra
    wrote on last edited by
    #3

    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

    1 Reply Last reply
    0
  • RichardR Offline
    RichardR Offline
    Richard Global Moderator
    wrote on last edited by
    #4

    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

    1 Reply Last reply
    0
  • C Offline
    C Offline
    clrcrtq
    wrote on last edited by clrcrtq
    #5

    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

    1 Reply Last reply
    0
  • RichardR Offline
    RichardR Offline
    Richard Global Moderator
    wrote on last edited by
    #6

    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

    1 Reply Last reply
    0
  • M Offline
    M Offline
    markHighLow
    wrote on last edited by
    #7

    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.

    1 Reply Last reply
    0
  • RichardR Offline
    RichardR Offline
    Richard Global Moderator
    wrote on last edited by Richard
    #8

    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
    1 Reply Last reply
    0
  • M Offline
    M Offline
    markHighLow
    wrote on last edited by
    #9

    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.

    1 Reply Last reply
    1
  • RichardR Offline
    RichardR Offline
    Richard Global Moderator
    wrote on last edited by
    #10

    Thanks for the update @markHighLow good luck! ⭐️

    M 1 Reply Last reply
    0
  • M Offline
    M Offline
    markHighLow
    replied to Richard on last edited by
    #11

    @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/

    1 Reply Last reply
    1

Before you post:

Use the Search Feature. Maybe there is already a solution to your issue.

1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. When using a WordPress Cache plugin, disable it or clear your cache.

Now see if your problem solved itself.

Go here, see if your problem is listed here:
Troubleshooting

When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it

Thanks!
Post a link to where the problem is if possible, please <3
I don't answer or check forum DMs, please just post on the forum.
Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
Online Users
arminunruhA S R M F
laytheme.com
  • Login

  • Don't have an account? Register

  • Login or register to search.
  • First post
    Last post
0
  • Recent
  • Tags
  • Popular
  • Users
  • Search
  • Login

  • Don't have an account? Register

  • Login or register to search.