0

I am new to using ligatures in an embedded web font. I have built a custom font with a specific ligature that will embed a logo (glyph) when a series of chars are typed. It works perfect everywhere but when its embedded on my site. I have tried all kinds of permutations of font-variant-ligatures but to no avail the transformations will not appear. I have tried WOFF, WOFF2, OTF, and SVG formats what am i doing wrong?

    @font-face {
        font-family: '4ORE';
        src: url('.../files/4ORE-Regular.woff2?v=1607563116') format('woff2'), /* Modern Browsers */
        url('.../files/4ORE-Regular.otf?v=1607563219') format('opentype'); /* Safari, Android, iOS */
        font-style: normal;
        font-weight: normal;
        text-rendering: optimizeLegibility;
    }

    body, html {
        padding: 0;
        margin: 0;
        font-family: '4ORE' !important;
        font-variant-ligatures: normal;
        font-feature-settings: "liga", "clig";
    }

and the font feature code is as follows:

    feature liga {
        # GSUB feature: Standard Ligatures
        # Lookups: 2

        script latn; # Latin

        lookup liga_latn_2 {
        # GSUB lookup 9, type 14 (Ligature)
           sub f f i by f_f_i;
           sub f i by fi;
        } liga_latn_2;

        lookup liga_latn {
        # GSUB lookup 10, type 14 (Ligature)
            sub f f l by f_f_l;
            sub f l by fl;
        } liga_latn;

        lookup liga_latn_4 {
        # GSUB lookup 11, type 14 (Ligature)
            sub four o r e by four_o_r_e;
        } liga_latn_4;

        language FRA ; # French
        lookup liga_latn_2;
        lookup liga_latn;

        language AZE  exclude_dflt; # Azerbaijani
        lookup liga_latn;

        language TRK  exclude_dflt; # Turkish
        lookup liga_latn;

        language MOL ; # Moldavian
        lookup liga_latn_2;
        lookup liga_latn;

        language ROM ; # Romanian
        lookup liga_latn_2;
        lookup liga_latn;

        language CRT  exclude_dflt; # Crimean Tatar
        lookup liga_latn;

        language NAV ; # Navajo
        lookup liga_latn_2;
        lookup liga_latn;
    } liga;
adbailey
  • 11
  • 4
  • Is the ligature you made a Standard Ligature, or is it something else, ex. a Discretionary Ligature? Can you post a snippet of the OpenType feature code as well, or any of the other HTML or CSS you are using? – kennethormandy Dec 05 '20 at 19:50
  • its a standard ligature, im trying to translate the typing 4ORE into a word mark. `body, html { padding: 0; margin: 0; font-family: 'five'; font-feature-settings: "liga", "clig"; -moz-font-feature-settings: "liga", "clig"; -ms-font-feature-settings: "liga", "clig"; -o-font-feature-settings: "liga", "clig"; -webkit-font-feature-settings: "liga", "clig"; font-variant-ligatures: common-ligatures; -webkit-font-variant-ligatures: common-ligatures; }` – adbailey Dec 06 '20 at 23:39
  • The un-prefixed version would typically go last, but you’ll get very wide browser support with `font-feature-settings` only, so I’d skip the browser prefixes (at least while you’re testing). Standard Ligatures and Contextual Ligatures should both be enabled by default in browsers, so really you shouldn’t even need this CSS. Can you edit the question to show the HTML, and if possible the OpenType feature code? – kennethormandy Dec 07 '20 at 23:03
  • I just edited the question above with the code you are asking about. I am perplexed as to why this isnt working. Thank you in advance for all of your help. if it would help i could provide you with the fontlab files. just let me know. again, thank you! – adbailey Dec 10 '20 at 01:33

0 Answers0