Okay
  Public Ticket #2957550
Typography - "font-variant-numeric" property
Closed

Comments

  •  1
    markdekoninginfobahn started the conversation

    I would like to add some CSS to my site to access the oldstyle numbers available in the sites typeface. Have tried "font-variant-numeric" without success. I must be doing something wrong. Can you help please.

    /Mark

  •  1,877
    Judith replied

    Hi Mark,

    Thanks for keeping in touch,

    Please allow me to escalate this to the developer to respond further.

    Thanks.


  •  1,071
    ThemeNectar replied

    Hey Mark,

    Are you trying to use the font-variant-numeric property with a custom font you've uploaded or with a Google font loaded from the theme options panel? If you're using a Google font, unfortunately they do not support that property at this time: https://github.com/google/fonts/issues/1335

    Kind regards,

  •  1
    markdekoninginfobahn replied

    Hi,


    I want to use the font-variant-numeric property with a custom font.

  •  1,071
    ThemeNectar replied

    Can you kindly share the URL and CSS snippet that you're using so that I can take a look?

    Thanks in advance

  •  1
    markdekoninginfobahn replied

    I don't currently have any CSS code regarding typography. The typeface I have chosen to use has a lot of features that I would like to utilise. I have read that "font-variant-numeric" will give me access to them. I have however not been able to get it to work.


    URL

    https://beta.studiolabbet.se/

  •  1,071
    ThemeNectar replied

    Hey Mark, 

    Have you tried to use the "font-feature-setting" css property to access your font glyphs yet? An example of the method for doing so can be found here:  https://stackoverflow.com/questions/54970525/using-a-specific-glyph-with-a-webfont

    Kind regards,

  •  1
    markdekoninginfobahn replied

    I haven't tried that option. And I'm not sure it will give me the right result either. I would simply like to turn on oldstyle numbers.

  •  1,071
    ThemeNectar replied

    Hey Mark,

    If you're just trying to make use of oldstyle-nums, you could add the following snippet into the custom CSS box located in the Salient options panel > General Settings > CSS/Script related tab:

    body {
      font-variant-numeric: oldstyle-nums;
    }

    I've tested to ensure this works by using the browser inspector to add some numbers in the text along with the CSS property: https://www.dropbox.com/s/hhfwm0oricz4iuv/Screen%20Recording%202022-01-17%20at%201.25.09%20PM.mov?dl=0

  •  1
    markdekoninginfobahn replied

    That is wonderful, many thanks!

    Can you help me with making adjustments with the spacing between the letters. I have had a look at "font-kerning", but i'm not sure its exactly right.

  •  1,877
    Judith replied

    Hi There,

    Please try this css:

    body {
        letter-spacing: 1px;
    }

    Thanks.