Enabling the "ct" ligature feature in Google Web Fonts

Question

Enabling the "ct" ligature feature in Google Web Fonts

In my current project, I am using the IM Fell English font. You can find it here:

This font supports ligatures such as "ff", "fi", "ft", and even the "long s" ſ.

However, I'm facing an issue with getting the "ct" ligature to work correctly, although the glyph is present in the font. You can see it here too: 1) and 2)

I've attempted to use the CSS property font-variant-ligatures following the instructions provided here, but it hasn't made a difference no matter what value I set: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures

To address this issue temporarily, I've replaced the "s" with the Unicode character "ſ". However, I haven't been able to find a similar Unicode character for the "ct" ligature (or a joining glyph).

Furthermore, to make the long ſ work, I had to import the font in this manner:

@import url('https://fonts.googleapis.com/css?family=IM+Fell+English:400,400i&subset=all&text=+!%22%23$%25%26()*%2B,-.%2F0123456789:;%3C%3D%3E%3F@ABCDEFGHIJKLMNOPQRSTUVWXYZ%5B%5C%5Dabcdefghijklmnopqrstuvwxyz%7B%7D%C2%A2%C2%A3%C2%A5%C2%A9%C2%AE%C3%97%C3%B7%C5%BF%E2%80%98%E2%80%99%E2%80%9C%E2%80%9D%E2%82%AC');

I managed to obtain the value for the text parameter by inputting the long ſ into the preview field on the Google Font webpage for IM Fell English and then observing the request sent out by my browser.

Below, you'll see that I desperately need to resolve this! (Note the "ct" in "Octaves"; while I've fixed the long ſ in titles, the paragraphs remain unchanged)

Recreation: https://i.sstatic.net/pDbbh.png Original Source: https://i.sstatic.net/2iman.png

Edit: I've discovered a workaround. I proceeded to download the IM Fell English font and utilized Character Map (available on Windows 10) to locate the glyph and copy it (U+E004 Private Use). Now, I face the challenge of being unable to search (using Ctrl F) for anything containing the ligature! Therefore, I cannot search for "Octaves" since it now appears as "Oaves".

I still believe the original question posed in the title remains unanswered. Instead of resorting to workarounds, I seek a solution where the browser enforces the ligature, if feasible.

css unicode google-font-api google-fonts ligature

Answer 1

Answer №1

According to Eana Hufwe, Google will automatically remove additional substitution features when requesting the font through the API. Instead, you will receive a subset that matches the current language on your page (or more specifically, the text used in it).

1. Get the complete "un-substituted" woff2 file

You can obtain the complete woff2 file using the developer API. In the example below, a static copy of the JSON response is utilized. Getting an API key is free and simple (Refer to the documentation) and gives access to the most recent font list from Google.

/*
//if you obtained an API key use this dynamic query URL
let format = 'woff2'
let apiKey = "";
let apiURL = `https://www.googleapis.com/webfonts/v1/webfonts?capability=VF&capability=${format}&sort=style&key=${apiKey}`;
*/

let apiURL = "https://cdn.jsdelivr.net/gh/herrstrietzel/fonthelpers@main/json/gfontsAPI_woff2.json";


// get font item
let fontFamily = "IM Fell English";
let familyQuery = fontFamily.replaceAll(" ", "+");
let fontList

( async()=>{
  fontList =  await (await (await fetch(apiURL)).json() ).items;
  //get data options
  populateDatalist(fontsDataOptions, fontList)

  //init
  inputFont.dispatchEvent(new Event('change'))

})()

inputFont.addEventListener('change', e=>{
  fontFamily = inputFont.value
  let item = fontList.filter(item => item.family === fontFamily)[0];
  let fontUrl = item.files.regular
  
  a_woff2.href = fontUrl
  a_woff2.textContent = fontUrl
  
})

function populateDatalist(target, list) {
  let datalistOptions = "";
  list.forEach((font) => {
      datalistOptions += `<option >${font.family}</option>`;
  });
  target.insertAdjacentHTML("beforeend", datalistOptions);
}

<fieldset>
  <legend>Get font from API </legend>
  <input id="inputFont" type="text" list="fontsDataOptions" value="IM Fell English" placeholder="Search for google font">
  <datalist id="fontsDataOptions"></datalist>


</fieldset>
<p><strong>Woff font URL: </strong>
  <a id="a_woff2" href=""></a>
</p>

2. Explore font-features

Upload your font to the UI helper wakamaifondue.com.
This tool will display all available features of the font along with a stylesheet containing all CSS font-feature-settings

https://i.sstatic.net/OSg6G.png

@font-face {
  font-family: "IM Fell English";
  src: url('https://fonts.gstatic.com/s/imfellenglish/v14/Ktk1ALSLW8zDe0rthJysWrnLsAz3EqmZVY9Y5w.woff2');
  font-weight: 400;
  font-style: normal
}

body {
  font-size: 8vw;
  font-family: "IM Fell English";
}

.im-fell-english-roman-dlig {
  font-feature-settings: "dlig" on;
  /* font-variant-ligatures: discretionary-ligatures; */
}

.im-fell-english-roman-ss01 {
  font-feature-settings: "ss01" on;
}

<p>
  <span class="im-fell-english-roman-dlig">
    ct ſs
</span>
  <span class="im-fell-english-roman-ss01">
    sa sb sc sd se sf sg sh si sj sk sl sm sn so sp sq sr ss st su sv sw sx sy sz sà sá sâ sã sä så sæ sç sè sé sê së sì sí sî sï sð sñ sò só sô sõ sö sø sù sú sû sü sý sþ sÿ sā să są sć sč sď sđ sē sė sę sě sğ sģ sī sį sķ sĺ sļ sľ sł sń sņ sň sō ső sœ sŕ sŗ sř sś sş sš sţ sť sū sů sű sų sŵ sŷ sź sż sž sș sẁ sẃ sẅ sỳ
</span>
</p>

<h3>No features appllied</h3>
<p>
    ct ſs
    sa sb sc sd se sf sg sh si sj sk sl sm sn so sp sq sr ss st su sv sw sx sy sz sà sá sâ sã sä så sæ sç sè sé sê së sì sí sî sï sð sñ sò só sô sõ sö sø sù sú sû sü sý sþ sÿ sā să să... (read more at source)

This method can also be applied to Google fonts that include special glyphs like arrows, symbols, etc. (e.g., IBM Plex).

Answer 2

According to Eana Hufwe, Google will automatically remove additional substitution features when requesting the font through the API. Instead, you will receive a subset that matches the current language on your page (or more specifically, the text used in it).

1. Get the complete "un-substituted" woff2 file

You can obtain the complete woff2 file using the developer API. In the example below, a static copy of the JSON response is utilized. Getting an API key is free and simple (Refer to the documentation) and gives access to the most recent font list from Google.

/*
//if you obtained an API key use this dynamic query URL
let format = 'woff2'
let apiKey = "";
let apiURL = `https://www.googleapis.com/webfonts/v1/webfonts?capability=VF&capability=${format}&sort=style&key=${apiKey}`;
*/

let apiURL = "https://cdn.jsdelivr.net/gh/herrstrietzel/fonthelpers@main/json/gfontsAPI_woff2.json";


// get font item
let fontFamily = "IM Fell English";
let familyQuery = fontFamily.replaceAll(" ", "+");
let fontList

( async()=>{
  fontList =  await (await (await fetch(apiURL)).json() ).items;
  //get data options
  populateDatalist(fontsDataOptions, fontList)

  //init
  inputFont.dispatchEvent(new Event('change'))

})()

inputFont.addEventListener('change', e=>{
  fontFamily = inputFont.value
  let item = fontList.filter(item => item.family === fontFamily)[0];
  let fontUrl = item.files.regular
  
  a_woff2.href = fontUrl
  a_woff2.textContent = fontUrl
  
})

function populateDatalist(target, list) {
  let datalistOptions = "";
  list.forEach((font) => {
      datalistOptions += `<option >${font.family}</option>`;
  });
  target.insertAdjacentHTML("beforeend", datalistOptions);
}

<fieldset>
  <legend>Get font from API </legend>
  <input id="inputFont" type="text" list="fontsDataOptions" value="IM Fell English" placeholder="Search for google font">
  <datalist id="fontsDataOptions"></datalist>


</fieldset>
<p><strong>Woff font URL: </strong>
  <a id="a_woff2" href=""></a>
</p>

2. Explore font-features

Upload your font to the UI helper wakamaifondue.com.
This tool will display all available features of the font along with a stylesheet containing all CSS font-feature-settings

https://i.sstatic.net/OSg6G.png

@font-face {
  font-family: "IM Fell English";
  src: url('https://fonts.gstatic.com/s/imfellenglish/v14/Ktk1ALSLW8zDe0rthJysWrnLsAz3EqmZVY9Y5w.woff2');
  font-weight: 400;
  font-style: normal
}

body {
  font-size: 8vw;
  font-family: "IM Fell English";
}

.im-fell-english-roman-dlig {
  font-feature-settings: "dlig" on;
  /* font-variant-ligatures: discretionary-ligatures; */
}

.im-fell-english-roman-ss01 {
  font-feature-settings: "ss01" on;
}

<p>
  <span class="im-fell-english-roman-dlig">
    ct ſs
</span>
  <span class="im-fell-english-roman-ss01">
    sa sb sc sd se sf sg sh si sj sk sl sm sn so sp sq sr ss st su sv sw sx sy sz sà sá sâ sã sä så sæ sç sè sé sê së sì sí sî sï sð sñ sò só sô sõ sö sø sù sú sû sü sý sþ sÿ sā să są sć sč sď sđ sē sė sę sě sğ sģ sī sį sķ sĺ sļ sľ sł sń sņ sň sō ső sœ sŕ sŗ sř sś sş sš sţ sť sū sů sű sų sŵ sŷ sź sż sž sș sẁ sẃ sẅ sỳ
</span>
</p>

<h3>No features appllied</h3>
<p>
    ct ſs
    sa sb sc sd se sf sg sh si sj sk sl sm sn so sp sq sr ss st su sv sw sx sy sz sà sá sâ sã sä så sæ sç sè sé sê së sì sí sî sï sð sñ sò só sô sõ sö sø sù sú sû sü sý sþ sÿ sā să să... (read more at source)

This method can also be applied to Google fonts that include special glyphs like arrows, symbols, etc. (e.g., IBM Plex).

Enabling the "ct" ligature feature in Google Web Fonts

Answer №1

1. Get the complete "un-substituted" woff2 file

2. Explore font-features

Similar questions

The click event on a card is not triggering on a cloned item in the Owl Carousel 2

Include the array in the 'content' property of the CSS using Jquery

Display the HTML/CSS layout following the JavaScript window.open action

Using Material UI v1 to customize the widths of table columns

Bulma: Tips for creating equally sized buttons?

The hover effect does not work when clicking the mouse button in the Chrome browser

Attempting to link two JavaScript files, however, only one of them is functioning correctly

I am having trouble with my scroll reveal effects on JavaScript, how can I troubleshoot and fix the issue?

Bootstrap 4 offers a full-height, full-width layout that is optimized for Chrome, but may not display as well on Firefox or

Create a new division directly underneath the bootstrap column

Steps to Change the Background Color to White in a Dropdown menu

Can you please explain the meaning of this wildcard symbol?

What could be the reason for the gap that shows up when transitioning from one image to the

Tips for adding CSS styling to the action button within the ShinyWidgets package in Shiny applications

Showcasing Portfolio Work in a User-Friendly Mobile Design

What is the best way to position a div as a footer within a larger main div?

The CSS background fails to expand to the entire height of the element

Ways to align one child to the end without affecting any other elements

Creating a responsive image using Bootstrap with an SVG filter applied

Creating a Dynamic Soundtrack: How to Embed an Audio