Barba: Typography looks transparent on code samples

[trevasco]

the font styles for the code examples in the docs are really light and a bit hard to read. maybe bump the font weight up one? other than that, love the awesome new site!

[xavierfoucrier]

Hi @trevasco,

Thanks for getting in touch.
Unfortunately, it depends on the web browser you are using and how it is configured.

On Google Chrome with the default settings, the font weight looks good:

What browser do you use?

[trevasco]

hmm strange.. I'm on the latest Google Chrome, and don't recall ever messing with any settings

[xavierfoucrier]

@trevasco,

Can you try on another browser, or just reset your Chrome settings, then restart, then test and show the result. Thanks :wink:

[trevasco]

yeah I just reset them and same issue 🤷‍♂

[trevasco]

looks the same on firefox / safari as well

[xavierfoucrier]

MacOS or Windows? (or Linux? ... :smile:)

[trevasco]

macOS Sierra. I checked it on browserstack with same settings and it looks fine, so definitely something specific with my machine, just not sure what 😄

[xavierfoucrier]

The site is using monospace, so probably something wrong with the typo file on your machine. Or probably something about font smoothing. Sorry to be unable to help you with that :disappointed:

I am closing the issue :wink:

[gitgudcameron]

This shouldn't be closed. I have to increase the font-weight in the inspector every time i visit the site. It's near impossible to read otherwise. I'm using Chrome on the latest MacOS.

[xavierfoucrier]

Hi @gitgudcameron,

This is something we will look into and check. Thanks for the feedback.

[xavierfoucrier]

@gitgudcameron some people reported this issue, can you please share a screenshort of the rendering you got on MacOS/Chome?

Thanks a lot!

[gitgudcameron]

Hey @xavierfoucrier,

Hopefully some of this is useful. It's rendering 'Source Code Pro ExtraLight'.

Adding this font-weight does the trick for me:

.code {
    font-weight: 400;
}

[xavierfoucrier]

@gitgudcameron thanks for the share.

This is probably because Chrome resolves the font using your local files through the name "Source Code Pro". I am on Windows and doesn't have those typos installed, that's why I haven't seen this bug.

I close the issue, and will push a fix with the next documentation update.

EDIT: I finally found that the typo "Source Code Pro" is not properly added to the main stylesheet, that was the browser use the local typo in certain cases where the typo is available, fallback to monospace or consolas instead.