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;