Using font character substitutions in CSS or JS

Question

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>

Did you test it with Firefox or Safari? It looks like they are currently the only browsers that support font-variant-alternates: http://caniuse.com/#feat=font-variant-alternates — ausi, Oct 07 '16 at 08:50

ausi · Accepted Answer · 2016-10-07T12:59:49.307

3

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

edited Oct 07 '16 at 12:59

answered Oct 07 '16 at 09:09

ausi

7,253
2
31
48

Damn rad'! Thanks for that mate. – Carl Papworth Oct 07 '16 at 09:12
Is it possible to combine this with the data-variant-function below? – Carl Papworth Oct 07 '16 at 09:15
I don’t think so. But you could create CSS classes like `alt-1`, `alt-2` and so on, and use them for different characters. You will probably need not more than `alt-5` or so. – ausi Oct 07 '16 at 09:20
Yes, figured that out :) Thanks anyway, googled like crazy to find something on this. – Carl Papworth Oct 07 '16 at 09:24
1

You can find more information about font settings in the Typekit help from Adobe: https://helpx.adobe.com/typekit/using/open-type-syntax.html – ausi Oct 07 '16 at 09:27

score 0 · Answer 2 · answered Jul 15 '19 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 · Answer 3 · 2016-10-07T08:52:58.627

-2

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)

edited Oct 07 '16 at 08:52

answered Oct 07 '16 at 08:46

Nikhil Nanjappa

6,454
3
28
44

Well, that is really neat when the property actually works, which it doesn't seem to do. My main problem now is just accessing the alternative glyph – Carl Papworth Oct 07 '16 at 08:50
This is what your caniuse link says. - "CSS Values and Units Level 3 adds the ability to use attr() **on any CSS property, not just content**, and to use it for non-string values (e.g. numbers, colors)." Can you even read your own suggestions more carefully before downvoting ?? Flaging your comment for now – Nikhil Nanjappa Oct 07 '16 at 10:26
@NikhilNanjappa You are right, that is what caniuse says. But if you take a closer look you can see that not a single browser supports that feature. That is what I wanted to point out, sorry for the ambiguity. – ausi Oct 07 '16 at 12:37
For people reading this discussion (since my original comment was deleted) this is the link we are talking about: http://caniuse.com/#feat=css3-attr – ausi Oct 13 '16 at 08:06

Using font character substitutions in CSS or JS

3 Answers3