getting ligatures from other fonts via css
What I am trying to achieve is to use one font, but only ligatures from a different font. My approach of doing this, is using the unicode-range-descriptor. So this is my css:
<style> @font-face { font-family: 'ligature'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/playfairdisplay/v21/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKebunDXbtM.woff2) format('woff2'); } @font-face { font-family: 'no-ligature'; font-style: normal; font-display: swap; src: url(https://fonts.gstatic.com/s/robotomono/v11/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_Xvq_ROW4.woff2) format('woff2'); } @font-face { font-family: 'no-ligature'; src: url(https://fonts.gstatic.com/s/playfairdisplay/v21/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKebunDXbtM.woff2) format('woff2'); unicode-range: U+0066, U+0062; } li { font-family: 'no-ligature'; font-size: 100px; } </style> As you can see in this Repl, of course now all the f’s and b’s are substituted, and it shows not just the ligatures. There is no specific point in the unicode-table for ligatures, so how can I target only certain ligatures?
Thanks in advance for helping me!
Note: In the Repl i’m using a font which has no fb-ligature, roboto mono, and try to merge the fb-ligature of play fair. These fonts don’t represent the actual fonts i’m using and are just for presentational purposes.
