CODEWITHSUNDEEP
javascripthtmlcssfontsglyph-substitution
Carl Papworth
Carl Papworth

Reputation: 1322

Using font character substitutions in CSS or JS

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>

Upvotes: 6

Views: 3280

Answers (3)

Daveman
Daveman

Reputation: 1096

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';
}

Upvotes: 1

ausi
ausi

Reputation: 7413

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;
}

Upvotes: 4

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6632

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)

Upvotes: -2

Related Questions