css Question posted in
Some basic documentation can be found here.

Css – Changing font-feature-settings with javascript

I’m trying to activate different stylistic sets, in this example with a button.

My code:

<p id="demo">B</p>

<button type="button" onclick="document.getElementById('demo').style.fontFeatureSettings ='ss01'">Click Me!</button>
Tags:

3

Answers


  1. 0

    You might want to look at this if you haven’t already. It allows you test test your ideas.

    Play around with it to get the feel

    Login or Signup to reply.
  2. 0

    The issue is, the value ss01 needs to be "ss01" … in onclick= that’s going to get a little messy, though doable like so:

    <button type="button"
    onclick="document.getElementById('demo').style.fontFeatureSettings
        ='@quot;ss01@quot;'">
    Click Me!
</button>

    (Note: I made it multiline so it’s easy to read here)

    I would use addEventListener instead for cleaner looking code

    document.getElementById("theButton").addEventListener('click', () => {
  document.getElementById('demo').style.fontFeatureSettings ='"ss01"';
});
    <p id="demo">B</p>

<button type="button" id="theButton">Click Me!</button>
    Login or Signup to reply.
  3. 0

    1)Have you import the font in your head?

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nome+del+Font">

    2)if you want to change only the style you need to write:

    document.getElementById('demo').style.fontFamily = "'Roboto', sans-serif";

    1. You can also use the line below to activate a specific set of styles:

      document.getElementById(‘demo’).style.fontFeatureSettings = "’ss01’";

    However, please note that not all browsers support all sets of styles, and you should check in the font documentation if the specific set of styles (such as SS01) is included.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search