CSS-Tricks/coding-fonts

Broken preview on website

Closed this issue · 6 comments

Many preview images (such as Consolas, FiraFlott, Hack and more) on the website are broken. Hope they will get fixed.

I think I found the issue. Is Consolas working for you now?

Yes I believe so, especially after I cleared browser cache. However sometimes the images are still missing, and I would need to reload the page to make it work.

I have one question: why won't you directly use woff2 to display the actual font on the webpage, or at least provide that option?

BTW, when I said it's working earlier, I meant on my mobile device. It's still not working on my desktop as for now.

Edit: Now it works on desktop too after a whole day.

Should be all set. Thanks for pointing it out. I use images just so, theoretically, this site lasts longer. No real dependency on a certain technology. But an even bigger reason is being able to include paid fonts without maintaining a license.

As of now, for example Hasklig is still not working. The following address

https://res.cloudinary.com/css-tricks/image/fetch/w_1200,q_auto,f_auto/https://coding-fonts.css-tricks.com/screenshots/anonymous-pro/html-dark.png

returns 404 with the error header:

x-cld-error: Resource not found - Error in loading https://coding-fonts.css-tricks.com/screenshots/hasklig/html-dark.png - HTML response

Full headers as follows:

accept-ranges: bytes
access-control-allow-origin: *
access-control-expose-headers: Content-Length,Content-Disposition,Content-Range,Etag,Server-Timing,Vary,X-Cld-Error
cache-control: private, no-transform, max-age=0, no-cache
content-length: 0
content-type: image/gif
date: Wed, 26 Jan 2022 01:21:08 GMT
etag: "d41d8cd98f00b204e9800998ecf8427e"
expires: Wed, 26 Jan 2022 09:06:36 GMT
last-modified: Tue, 25 Jan 2022 09:06:37 GMT
server: Cloudinary
server-timing: akam;dur=4;start=2022-01-26T01:21:08.356Z;desc=hit,rtt;dur=38
strict-transport-security: max-age=604800
timing-allow-origin: *
vary: Accept,User-Agent,Save-Data
x-cld-error: Resource not found - Error in loading https://coding-fonts.css-tricks.com/screenshots/hasklig/html-dark.png - HTML response

Now accessing https://coding-fonts.css-tricks.com/screenshots/hasklig/css-dark.png directly only results in HTML content of the website (not by http redirection, but by directly return the HTML) even with referer header.

Update:

Oh, now it works after 1 second. Not sure why. I'll keep observing. Maybe the CDN takes a while to fully sync?