search

processing / processing-website

Repository for the processing.org website
https://processing.org
GNU General Public License v2.0
64 stars 95 forks source link

Switch monospace font from Space Mono to JetBrains Mono #533

Closed SableRaf closed 1 month ago

SableRaf commented 1 month ago

Replaced Space Mono with JetBrains Mono for improved legibility of code examples, and code snippets. Updated CSS to use JetBrains Mono as the default monospace font for all text which previously used Space Mono.

fixes #528

netlify[bot] commented 1 month ago

Deploy Preview for java-processing-faf822 ready!

Name Link
Latest commit 441d1db7805b73a7a8a82cb32db6b9acb76bd4ac
Latest deploy log https://app.netlify.com/sites/java-processing-faf822/deploys/669003747a437e0008e7de8c
Deploy Preview https://deploy-preview-533--java-processing-faf822.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

SableRaf commented 1 month ago

cc @pzelchenko @TechnicJelle for review.

See the deploy preview link above ☝️

Please review and let me know if you notice any issues with the changes.

TechnicJelle commented 1 month ago

I'm looking right now, and it seems okay, except the l, t, and m look weird...

Preview build on the left, JB Mono in my Processing IDE on the right: image

The l and the t on the website have a bend at the bottom. I wonder where that came from? I just checked, and there wasn't an update that changed that recently, so I'm still on the latest version, v2.304.

Oh, I just noticed the m also looks different... The middle leg doesn't go all the way down on the website, when compared to my local version.

I tried downloading the woff file that the website is using directly, and opening it in FontForge, but it looks fine there... So there must be something else going on, but I don't know what...

SableRaf commented 1 month ago

I'm looking right now, and it seems okay, except the l, t, and m look weird...

Oooh good catch. This is due to the OpenType glyph variants (stylistic sets) which can be controlled with CSS. I'll make a fix shortly. Thanks for your eagle eye!

SableRaf commented 1 month ago

Found the issue! The font-feature-settings property was set globally for the whole html tag in base.css. Fixed by creating a --font-mono-settings variable and setting it to normal !important.

TechnicJelle commented 1 month ago

Oooh good catch. This is due to the OpenType glyph variants (stylistic sets) which can be controlled with CSS. I'll make a fix shortly. Thanks for your eagle eye!

Ohh, thanks! I didn't know about this feature! (Or, more likely, I did at one point, and then forgot... :sweat_smile: ) Then it looks all good to me too!