Why are my Google font uppercase letters displaying too light?

Question

Using Google fonts in this website, some uppercase letters are too light(feint) compared to the lowercase. See the text here:

https://katherinesolomon.com/farm-animals/

The problem seems to affect narrow uppercase letters more than wide letters. System fonts (like arial) don't show this problem.

Right now the site is using the Google font "Dosis". I've tried substituting other Google sans-serif fonts but that does not fix the problem; the other choices showed the same problem. I've tried substituting different font weights but that does not help either.

This seems to happen regardless of browser or device.

Can anyone figure out the problem and a solution?

Answer 1

You can change the default CSS setting that is being used on the site. In the style.css file you can change the default font name, change the default font size, change the default font color, which you want to use on the site.

'

.body { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:black; }

'

for example.

Answer 2

I finally figured it out. The problem was in specifying selective text. The Google Fonts API does not allow for selective text in just one of multiple families.

This does NOT work:

<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&family=Playfair+Display&text=KATHERINE%20SOLOMON&display=swap" rel="stylesheet">

Instead, you must split the call into two like this; this works:

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&text=KATHERINE%20SOLOMON&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&display=swap" rel="stylesheet">

While this requires two calls to Google Fonts, it is still quicker than requesting the full family of both.