0

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?

hommealone
  • 23
  • 7
  • Dosis is a variable font. Have you tried *not* including the `weigth` information in the header link which loads the google fonts? – Johannes Jan 12 '22 at 23:51
  • @Johannes - good thought; I tried and it made no difference. – hommealone Jan 13 '22 at 00:37
  • @Ana Gauna - thanks but I'm trying to use a Google font instead of a system font. I've edited the CSS for the body tag, trying several different Google fonts and also trying system fonts. The problem is there with all of the Google fonts I've tried, and none of the system fonts. – hommealone Jan 13 '22 at 00:40

2 Answers2

0

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.

hommealone
  • 23
  • 7
-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.

Ana Gauna
  • 11
  • 2