[Resolved] Font size and letter spacing

[Stephan]

Hey,

I have two issues.

The first is, that the letter spacing of the title of my site is bigger on mobile (iOS 16) than on the desktop version. I can not explain why, I played with the letter spacing option and that works – but only for the desktop version. The font I used I added manually with

@font-face {
    font-family: 'Creampuff';
    font-style: normal;
    font-weight: normal;
    src: url('https://example.com/wp-content/uploads/sites/3/2023/01/Creampuff.woff') format('woff');
}

The second is that the widget “Recently viewed products” has a bold font. I played with the CSS and it affects the fonts in the sidebar, but that specific widget always is bold. I have the feeling that it might be because of the imported WooCommerce products?

Thanks a lot for your help,
Stephan

[David]

Hi there,

1. i don’t see the issue with the site title, and the CSS for the letter-spacing is identical on all screen sizes.
is this on a specific browser?

2. Add this CSS:

.woocommerce ul.product_list_widget li a {
    font-weight: 400;
}

[Stephan]

Hi David,

thanks for the CSS, that worked perfectly!

As for the title letter spacing I attached two screenshots. The problem does not appear in mobile view on desktop, only on a real iPhone (in all installed browsers).

[David]

Try setting its Font Weight to Default or Normal
Its currently set to 700 and it doesn’t look like the font has that variant, so iOS is trying to fake that.

[Stephan]

You are right, there is only one font weight. Is there a way to generate the “bold” variante somehow differently? I tried some onlinefont generators, but did not find an option for that.

Quick and dirty would also be enough: can we not tell the browser to make the font bold, like with:

.site-title, .site-title a {
font-weight: bold !important;}

That one does not work, unfortunately.

[David]

You would have to re work the font.
There are several apps such as Font Lab, Glyphs, FontCreator that allow you to create/edit fonts.
Otherwise you have to fake it and as you have discovered that can have rather bad results.

you can try adding a stroke to the font:

.site-title {
    -webkit-text-stroke: 0.5px;
}

[Stephan]

Thanks for your tipps, I did not know that was possible, I will look into it.

The stroke did not work unfortunately, but I can live with it for now – I did not expect such a big subject behind it. 🙂

Thanks a lot for your awesome support!

[David]

You’re welcome

[Author]

Posts