Small issue with with Adobe Fonts

Feedback
1

I know Cwicly doesn’t yet support Adobe Fonts the way it does Google Fonts. I’ve found a way that seems to work really well though, where I just use an @import for the Adobe fonts url in the global CSS, and then add the fonts and weights through the Cwicly Settings, the same way I would with local fonts. This lets me successfully select the Adobe fonts inside of Cwicly and renders them correctly in the block builder.

The issue I’m running into though is the requirement to upload a .woff2 file. Even though I’m able to save and use the fonts through the Cwicly Settings, when the page loads on the front end, I get a 404 error because Cwicly is trying to load the .woff2 file, which is intentionally left blank in the settings.

It would be awesome if Cwicly would just ignore the blank file and not try to load it.

1 Like
2

Currently, there is no interface to add Adobe fonts and an API token in the settings to make the fonts properly available inside the builder.
You could add a feature request for it.
Feel free to add your vote/thoughts here.

The Cwicly approach in terms of custom fonts is focused on serving fonts locally, so Adobe fonts can’t be supported this way.

3

One of the things I’m loving about Cwicly is that you don’t actually need an API token to use the fonts and the Cwicly settings already work well to display the Adobe fonts inside the builder. The site itself loads the Adobe Fonts just fine and everything looks good on the frontend and in the backend. The issue I’m running into is that Cwicly is trying to load an empty .woff2 file, which is resulting in a 404 in the console.

What I would like to see happen is, if the field for uploading the woff2 file is empty, Cwicly shouldn’t try to load it.

While I would love an interface specific to Adobe Fonts, that’s not really what this feedback is about since I feel like it already works fine, even if there is room for improvement.

4

Hi Asked chat GPT it suggested this.

  1. Find the font script tag in the HTML file’s header. It might look like this:

htmlCopy code

<head>
  <link href="https://fonts.googleapis.com/css?family=FontName" rel="stylesheet">
</head>
  1. Identify the specific font script tag that you want to remove. You can do this by checking the href attribute value or any other identifying feature.
  2. Use JavaScript to select and remove the font script tag. You can accomplish this with the following code:

javascriptCopy code

// Find the font script tag
var fontScript = document.querySelector('link[href="https://fonts.googleapis.com/css?family=FontName"]');

// Remove the font script tag from the header
if (fontScript) {
  fontScript.parentNode.removeChild(fontScript);
}

Replace "https://fonts.googleapis.com/css?family=FontName" with the actual URL or value of the href attribute of the font script tag you want to remove.

  1. Place this JavaScript code wherever it’s appropriate in your HTML file, typically within a <script> tag before the closing </body> tag.

When the JavaScript code is executed, it will find the font script tag with the specified href attribute and remove it from the header, preventing the font from being loaded and applied to the web page.