Comments/Ratings for a Single Item

It's now possible to select any font in a fontlist. When you do so, it will just be the specific font, not other fonts in the same list. With this done, I have now reorganized the fonts so that no font appears twice. Except for the default fonts (STIX Two Text, Literata, Noto Sans, and Courier Prime), you cannot use a font in any fontlist unless you already have it installed. The fonts appearing by themselves outside of fontlists are all Google fonts.

When you load the page, and you have already selected a specific font from a fontlist, it will open that fontlist to show you which font you have selected. But if you have only selected the fontlist itself, it will not open it, though you may open it or any other fontlist after loading the page. Whenever you open a fontlist, it will close any others in the same group.

I did some reorganization to better enable the ability to use a sans-serif font for the body text or a serif font for the headings and menus. I was originally using the CSS custom properties --serif, --sans-serif, and --mono, and I have now added --bodyfont and --headerfont. In doing so, I can avoid assigning --serif to sans-serif fonts or --sans-serif to serif fonts. Now, --serif will always refer to serif fonts, and --sans-serif will always refer to sans-serif fonts, but --bodyfont and --headerfont may equal either --serif or --sans-serif, depending upon your preferences. Because this involved adding these two new custom properties to global.css and globalindex.css, you may need to refresh your browser cache before this will work properly.

If you do view the site with sans-serif body text and serif headings and menus, then I recommend changing the fonts, as the default fonts do not work best for this when switched. I would recommend Lora for serif headings and menus and either Fira Sans or Radio Canada for sans-serif body text.

To keep things simpler, I reverted the serif default back to Literata. I had made the default different for desktop and mobile before I created the Font Settings script. Now that this script is available, you can just change to a different font if you would prefer something other than Literata.In case you want to use only local fonts, the default serif fontlist looks like this:

Literata, Bookerly, Georgia Pro, Charis SIL, Cambria, Noto Serif, Georgia, Iowan Old Style, Caecilia, serif

On Kindles and Fire tablets, this will give you Bookerly or the option to choose Caecilia. Georgia Pro is much further ahead than Georgia, because it handles numerals better than the version of Georgia on Windows. But I have included Georgia, because on my mobile devices, it looks like Georgia Pro. Also, the fonts in between are not on my mobile devices. Cambria is normally found on Windows and should stop a Windows user from getting the inferior Georgia. The other two are in my Linux Mint installation. Iowan Old Style is on my iPad and should also be on Apple computers.

Since it's a loadable Google font, I moved STIX Two Text to its own input element in the form.

I have included Georgia, because on my mobile devices, it looks like Georgia Pro.

Correction. It is just on my Android devices that it has numerals of uniform height like Georgia Pro does. On my iPad and my Fire tablet, it uses the same version of Georgia as Windows does. While the Fire tablet has Bookerly, which is a top choice, I moved Georgia down further for the iPad, and I added Charter and Cochin for that device.

Just a heads up, for me on my iPad (iPadOS 18.3) the Diagram Designer page looks different, fontwise, to the other pages on the site.

Also the font used on this font settings page, seems to differ now from the other pages on the site, except when adding a comment.

Just a heads up, for me on my iPad (iPadOS 18.3) the Diagram Designer page looks different, fontwise, to the other pages on the site.

That page didn't include headcode.php, its main include file was in the /play/ directory, and it also included common.css, which needed to be updated regarding fonts. I have now corrected these issues, and I purged common.css from the cache. In tests on my iPad, fonts are now looking as they should in Edge, but Safari was displaying local fonts even though I had specified Google fonts. However, Safari doesn't let me selectively refresh its cache. So it may take time before it catches up.

Also the font used on this font settings page, seems to differ now from the other pages on the site, except when adding a comment.

Since I recently made changes to the CSS files, your browser may need to refresh its cache before the fonts start looking the same on all pages.

The Diagram Designer page now looks correct, but this Font Settings page still looks different. I'll wait a while more to see if the cache invalidates.

The main issue I'm having on the iPad is that if I set everything to the defaults, I should see Noto Sans being used for headings and menus, but instead of that, I see Trebuchet being used on pages other than this one. The main difference between this page and other pages is that this page loads all the Google fonts, and other pages load only the ones selected.

For one test, I changed the sans-serif font from default to Noto Sans, and then I got Noto Sans on other pages. I'm not sure why this is making a difference. Unfortunately, the app I'm using to see the page source is not taking into consideration how cookies are affecting the page source. So, with respect to the loading of fonts and the assignment of custom properties for fonts, it gives me the same HTML code.

As another test, I ran Vivaldi on my iPad, because I had not yet used it with Font Settings. On first looking at some pages, it used a serif for the heading on the homepage, but on the Comments page, it seemed to be using Noto Sans for headings, menus, and body text. After I went to the Font Settings page and explicitly set the defaults, it used Trebuchet for headings and menus and (presumably) Literata for body text.

This should not be happening, because the default values are supposed to be used whenever the cookies are not there. I suppose I'll have to add some code to show me the cookie values and font assignments it is making and see if anything is amiss on the iPad.

And that problem should now be fixed. The main issue was that when it was not loading all the Google fonts, it was failing to load Noto Sans. I did not notice this on my PC or on Android, which both had Noto Sans installed, but I did on the iPad, which didn't have it installed. The problem was that I had changed part of the code to use defaultserif and defaultsans to specify a different default for serif and sans, but I was still using the keyword default in other parts of the code.

If you can't use the "Web Inspector" option on the iPad, due to not having access to a Mac running Safari (which you can link to the iPad via the Develop menu) I've found the iPad Inspect App quite useful, and it should show and adhere to any browser cookies.

Can it be used within a browser?

The Inspect App? No it basically is a browser, but as essentially all browsers on an iPad are Safari anyway, it's like having a web inspector mode on Safari directly on the iPad.

Fonts on my PC/FireFox did change since this morning, though, and boldface seems gone again. Before I refreshed the browser cache even the Comment texts were in boldface.

Are your problems with boldface only with Google fonts? If you select the option to use only local fonts, does that fix the problem?

For some reason my font settings were reset to Google, instead of local/default, even though I was still logged on. Now that I selected local again boldface is back.

The cookie for that setting may have expired. Do you have old versions of any of the Google fonts installed on your computer?

I never consciously installed any fonts on my computer. (Perhaps with the exception of Asian kanji fonts.)

Can you check your installed fonts and confirm that Literata, Noto Sans, Courier Prime, and Lora are all absent?

The Inspect App? No it basically is a browser, but as essentially all browsers on an iPad are Safari anyway, it's like having a web inspector mode on Safari directly on the iPad.

I found a different app that is free and gives me an actual web inspector mode in Safari on my iPad. It is called Web Inspector, and it installs a Safari extension.

Not used that one, looks good though