Custom fonts turns out blurry

Hello,

because of data privacy regulations i would like to replace the Google Fonts in with local fonts.
I have followed to the guide here: https://xtemos.com/docs-topic/how-to-upload-custom-fonts/
but the fonts turn out blurry.

These are the settings and results before i did any changes: see attached “default_settings.png”.

I downloaded Open-Sans from Google Fonts, converted the OpenSans-Regular.ttf to .woff and woff2 using https://cloudconvert.com/font-converter and upload it to wordpress.
I adjusted the settings accordingly to “custom_settings.png”.

Turns out, the bold texts on my site now appear blurrier / bolder. At least not that crisp, as with the original settings. See “comparison.png” (left image: before, right image: after).
Just bold texts are affected, regular weight looks fine.

How to fix that?

Thanks a lot!
Alex

Attachments:

You must be logged in to view attached files.

Hello,

Did you try to upload another font as woff2 and check how it works there? Because it can be an issue with the font itself.

Also, you can send me access to the admin panel so I can check that font on my end.

Kind Regards

I think I now know what’s happening, but I don’t know how to fix it with WoodMart.

When I upload the 600 variant of Open Sans and set it as the default font, the bold text is fine, but of course all the other text is bold as well.

The issue is that some elements in on the site use the default font with a higher weight.

p.stock { font-weight: 600; }

When using Google Fonts, the correct font weight is selected and everything looks nice. However, when using uploaded fonts, I can only assign one font as the default.
If I upload Open Sans Regular, all regular text looks nice, but text with a higher font weight looks blurry.
Alternatively, if I upload the Open Sans 600 variant, bold text will look fine, but all other text will also be bold.

So I need either a way to bundle the WOFF files for different weights or specify to use “Open Sans 600” for all bold text and Open Sans 400 for the regular.
I think the ‘Advanced’ tab below ‘WoodMart’ > ‘Typography’ can do what I want, but I don’t know how to apply a general rule.

Thank you for your help!
Alex

Hello,

Send me access to the admin panel so I can investigate that issue.

Looking forward to collaborating with you!

Kind Regards

Hello,

Here comes the login credentials.

Thanks a lot!

In the settings, I have set that custom font and on my end it looks well – https://prnt.sc/NnlTlFwXMw0O -> https://prnt.sc/C_F8kIYoRlGE

Please clarify how to replicate that issue.

Kind Regards

[website-4550]

Hello,

you have changed the settings (Typography -> Basic) for:
– “Title font”
– “Entities names font”
– “Secondary font”
– “Widget titles font”
– “Header font”

But this does not fix my issue. Please have a look at the attached screenshot.
The highlighted spots on the screenshot all use the font which setting is labeled “Text font” (on the “Typography -> Basic” page) name. But with a weight of 600. That why it turns out blurry.

1) The first bold element looks like this:

HTML:
<p class=”wd-product-stock stock wd-style-default in-stock”>
Auf Lager
</p>

CSS:
p.stock {
font-weight: 600;
line-height: 1.2;
}

2) The second bold element (the button) looks like this:

HTML:
<span>In den Warenkorb</span>

CSS:
.wd-product.wd-hover-fw-button .wd-add-btn>a {
width: 100%;
border-radius: var(–btn-accented-brd-radius);
color: var(–btn-accented-color);
box-shadow: var(–btn-accented-box-shadow);
background-color: var(–btn-accented-bgcolor);
text-transform: var(–btn-accented-transform, var(–btn-transform, uppercase));
font-weight: var(–btn-accented-font-weight, var(–btn-font-weight, 600));
font-family: var(–btn-accented-font-family, var(–btn-font-family, inherit));
font-style: var(–btn-accented-font-style, var(–btn-font-style, unset))
}

3) The third element:

HTML:
Versandkosten

CSS:
:is(.product,.product-quick-view) p.wc-gzd-additional-info a {
font-weight: 600
}

As you can see, all these elements uses font-weight: 600.
(There are also more blurry texts on my screenshot, the red pill with the label “( TIPP )” and the price. All blurry compared to using Google Fonts directly 🙁 )

Thanks again for your help.

• This reply was modified 3 months ago by website-4550.
• This reply was modified 3 months ago by website-4550.

Attachments:

You must be logged in to view attached files.

Hello,

At the moment, that fonts are not interconnected – https://prnt.sc/E_XUopW1RUcr , you need to rename the custom font and set the 1 name for both uploaded files (as this is 1 font that just have different weight) – https://prnt.sc/JgWbbouu9CTJ and then define that 1 font for the places you want – https://prnt.sc/BpINfb-mhqNG

Kind Regards

Thank you very much, that worked!

Topic solved.

Best regards
Alex

You’re welcome, Alex!

I’m glad to hear that.

If you run into any other problems or have more questions in the future, feel free to reach out.

Best regards

[Author]

Posts