Using font character substitutions in CSS or JS

2.8k Views Asked by Carl Papworth At 20 October 2024 at 00:07

I'm trying to access some alternative character glyphs using this font at the moment.

The font's character subs are named like this: "A.alt", "A.alt1", "B.alt" etc. so they don't have a unicode to go after.

I found this but when using Inspect Element the CSS-property just returns a "Unknown Property Name"-error. Any other way to do this?

<html>
    <meta charset="ISO-8859-1">
    <title>Glyph-test</title>
    <style>
        h1 {
            font-family: Baron neue;
            
        }
        h1 span.A-alt {
            font-variant-alternates: character-variant(A.alt);
        }
    </style>
    
    
    <h1>Testing alternative <span class="A-alt">A</span></h1>
</html>

Original Q&A

There are 3 best solutions below

ausi On 07 October 2016 at 09:09 BEST ANSWER

Instead of font-variant-alternates you can use font-feature-settings to achieve that. Set it to "salt" or "salt" 2 or "salt" 3 (and so on) according to which alternative you want to use.

Your CSS code could look like this:

h1 span.A-alt {
    font-feature-settings: "salt" 2;
}

Daveman On 15 July 2019 at 17:24

You can do it this way without the need of extra spans:

@font-face {
    font-family: 'MyFont';
    src: local('MyFont');
}

@font-face {
    font-family: 'MyFont-Alt';
    font-feature-settings: "salt"; 
    /* Above can vary depending on the font. For example:
        font-feature-settings: "aalt"; 
        font-feature-settings: "ss01";
    */
    src: local('MyFont');
    unicode-range: U+004d,U+004f ; /* Unicode values of the original characters. */
}

body{
    font-family: 'MyFont-Alt','MyFont';
}

Nikhil Nanjappa On 07 October 2016 at 08:46

The best way according to me is by making use of the data- attributes of HTML5 .

In your case you could implement it like so:

<html>
    <meta charset="ISO-8859-1">
    <title>Glyph-test</title>
    <style>
        h1 {
            font-family: Baron neue;

        }
        h1 span.A-alt {
            font-variant-alternates: character-variant(attr(data-variant));
        }
    </style>


    <h1>Testing alternative <span class="A-alt" data-variant="A.alt">A</span></h1>
</html>

You can implement the character-variant(attr(data-variant)) however you want it, but you get the point right. The value you pass via HTML & use that same value in your CSS using attr(data-name)

Using font character substitutions in CSS or JS

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in FONTS

Related Questions in GLYPH-SUBSTITUTION

Trending Questions

Popular # Hahtags

Popular Questions