What is this font that AskWoody is using?

Topic

New Reply

When I resize my windows just right, the font that AskWoody uses is very easy on the eyes. What is it and what size is it set at?

Reply | Quote

Replies

https://www.elegantthemes.com/blog/wordpress/how-to-see-what-font-a-website-is-using

1 user thanked author for this post.

WCHS

Reply | Quote

Without checking, the font face is probably Arial.

The two fonts most widely used (anywhere) are Arial and Times New Roman.

(Your office software, regardless of brand, will have many font types. Work through them until you find a flavor you like.)

On permanent hiatus {with backup and coffee}
offline▸ Win10Pro 2004.19041.572 x64 i3-3220 RAM8GB HDD Firefox83.0b3 WindowsDefender
offline▸ Acer TravelMate P215-52 RAM8GB Win11Pro 22H2.22621.1265 x64 i5-10210U SSD Firefox106.0 MicrosoftDefender
online▸ Win11Pro 22H2.22621.1992 x64 i5-9400 RAM16GB HDD Firefox116.0b3 MicrosoftDefender

Reply | Quote

There’s another catch to this story…

If a site doesn’t specify a particular display font (and not all of them do) the font used for that site will be whatever your browser’s default fonts are set to (typically “Times New Roman” for Serif fonts, “Arial” for San-serif fonts, and “Courier New” for Fixed-width fonts in most browsers.)

It’s also possible to set a “font override” in your browser to force it to always use your own personal font preference.

1 user thanked author for this post.

Will Fastie

Reply | Quote

I was confused by this question as I thought most using AskWoody would know that the USER chooses the default font for websites in each browser they use. You also choose the colors for text and background and link colors in each browser. This site being a Webpress site causes me a few problems with link colors but still I will NEVER use Microsoft default garish blue that most sites use as default for any links!

I use Verdana font with Unvisited links in a very nice green shade and a purple shade for Visited links. Some web browsers work better than others if you choose your own colors but all usually honor the font you choose. Browsers usually have a setting to force websites to honor the users link colors only if the user is using high contrast themes (signaling a vision problem) but most sites honor the user’s choice even when they are using regular themes.

I won’t use a browser that will not allow me to choose the font and font size and link colors. I don’t usually visit websites that won’t honor my choices. My eyesight is too precious. I make an except for this website (or I open Edge and use it here). On Fx 91.13.0 ESR (my default browser), I see Visited links in the Purple shade I have chosen. However, for about 1.5 years or so this site (not Fx as other sites when using Fx honor my choices) has refused to honor my choice for Unvisited links which is a nice green and instead shows them in a greyish color which is hard to read. This site used to show my green color. Edge, to my surprise and Microsoft’s credit, does honor my link colors as well as my choice for the font. I hope Fx, in a few days, will also do this when Mozilla updates the ESR version of Fx (we are still on Fx 91.13. There is a newer ESR version on a completely different path but I wanted to wait for Mozilla to push the new version which I think happens in the next few days).

Hmmm..this site DOES use my chosen green for unvisited links but only for Options after I upload an attachment here! Where it does NOT honor my green color is in the rightside column that I use all the time to look at threads on my default Fx browser. Looking back in my screen captures about 1.5 years ago this site was showing the green color for unvisited links …let’s hope it is a Fx problem as then it should get fixed when Mozilla pushes the new path and version of Fx to us ESR users still on version 91.13.

If you research you will quickly learn that Times New Roman is the LEAST READABLE of all generally used fonts on compute monitors. It’s especially bad on wide screen desktop monitors which is what I have had for the past almost 13 years. But I haven’t used any font except Verdana since the early 2000’s. I dislike Segoe (Microsoft’s default font).

Reply | Quote

Mele20 wrote:

I was confused by this question as I thought most using AskWoody would know that the USER chooses the default font for websites in each browser they use.

I actually did not know that. FF is my browser. Unlike your screen for the default font of Verdana, my screen says Times New Roman is the default. But, I am definitely not seeing Times New Roman when I browse AskWoody pages in FF. So, even though FF has chosen this default font for me, it appears to me that AskWoody is taking command of setting the font for its pages — Verdana.

And it seems that AskWoody is taking command of the color of the unvisited vs visited links, too. (I think I remember a discussion about these colors when the color changes were first made.) This doesn’t bother me. I’m flexible about this.

In Word documents, Calibri has been the font, probably because it at one time became the default and I never objected. But, I’ve discovered here that I like Verdana a lot better.

As I said, it (Verdana) is very easy on the eyes.

Reply | Quote

…my screen says Times New Roman is the default. But, I am definitely not seeing Times New Roman when I browse AskWoody pages in FF.

In Firefox, if you go to Settings>General, and then scroll down the page to the area that’s under the “Language and Appearance” heading, you’ll see the setting for “Fonts”, which you already have done since you know that your default is Times New Roman.

BUT, if you click the button labeled “Advanced…” (just to the right of the default pre-selected font listing), you’ll now see a box that lets you “fine tune” your exact font settings. At the bottom of this box is a check-box that’s labeled “Allow pages to choose their own fonts, instead of your selections above”. That check box is checked in my installation of Firefox, and I’m willing to bet that it’s checked by default in most peoples’ installations of Firefox. That’s probably why you see the site’s default, eye-friendly, font of Verdana instead of Firefox’s “default” of Times New Roman.  😉

3 users thanked author for this post.

SueW, WCHS, OscarCP

Reply | Quote

Bob99 wrote:

I’m willing to bet that it’s checked by default in most peoples’ installations of Firefox. That’s probably why you see the site’s default, eye-friendly, font of Verdana instead of Firefox’s “default” of Times New Roman.

You’re right!! I had seen this earlier, but had failed to scroll down, where I can now see that box that’s checked.

Reply | Quote

WCHS wrote:

What is it and what size is it set at?

The general font stack used by the site and by the emailed newsletters is:

Verdana, Helvetica Neue, Helvetica, Geneva, sans-serif

The stack means that the first font listed is used unless not installed on your PC, after which each font in turn is checked until one is found that is installed. If your PC has none of the named fonts installed, it will default to whichever font your PC considers the “sans-serif” font. That said, Verdana is so widely available across all devices that it is most likely what you are seeing.

We set the font size to 14px (not points, pixels).

Verdana is very readable because it was designed specifically to render well at low resolutions. Verdana looks good at 72dpi, for example. In other words, it was designed as a Web font.

I’d much prefer to use an even more readable font than Verdana. Although I’m able to select whichever font(s) I prefer for the site and force that choice, I can’t easily make the emails work the same way. Thus the font stack I’m using is a good compromise.

3 users thanked author for this post.

wavy, John, WCHS

Reply | Quote

geekdom wrote:

The two fonts most widely used (anywhere) are Arial and Times New Roman.

The first wave of fonts provided by Windows did become almost knee-jerk defaults. However, those fonts were designed for printers, to render well at 300dpi and up. At 100dpi, they render very poorly.

Since 2006, there has been a clear trend away from the early fonts and toward fonts designed for the lo-res Web.

This site and the newsletter were rendered in Arial when Susan acquired the property. Readability was very poor, and emails were very inconsistent about how they rendered Arial. Changing that was one of the first design changes we made.

1 user thanked author for this post.

geekdom

Reply | Quote

Mele20 wrote:

Where it does NOT honor my green color is in the rightside column

When I tuned up the formatting of the site, very minimal changes were made to the sidebar. It’s a different project, and we haven’t gotten to it yet. We did change the background by removing the woodgrain, which helped us to increase contrast.  But we have not gotten to resizing the fonts in the sidebar. Turns out there are some complexities. We are committed to readability, though.

The core AskWoody site is quite old. Font sizes that were entirely appropriate when displays were 1024×768 work less well today.

Reply | Quote

Will Fastie wrote:

It’s a different project, and we haven’t gotten to it yet. We did change the background by removing the woodgrain, which helped us to increase contrast.

I remember the woodgrain! I was so happy to see it go. I’ll look forward to whenever you do tackle the fonts in the side bar. Thanks for the commitment to readability.

Reply | Quote

“However, for about 1.5 years or so this site (not Fx as other sites when using Fx honor my choices) has refused to honor my choice for Unvisited links which is a nice green and instead shows them in a greyish color which is hard to read. This site used to show my green color.”

AskWoody is overriding the color that you selected. You can probably override it with CSS code.

Copy the code below into your Firefox userContent.css file (if you have one):

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain(“www.askwoody.com”) {
a:link { color: green !important; }
}

If you don’t like the shade of green, you can use hex codes to fine tune it.

Or, if you’re still using Basilisk, you could install the Stylem add-on and paste the above code into a new user style, titled something like AskWoody – green unvisited links.

https://addons.basilisk-browser.org/addon/stylem/

That should turn most unvisited links to green, including the ones in the sidebar. There will probably be a few outliers.

Reply | Quote

anonymous wrote:

AskWoody is overriding the color that you selected. You can probably override it with CSS code.

Where is that Firefox userContent.css file?

What would the code look like if you used a hex code?

Reply | Quote

You can also use a:visited and a:hover to set your preferred colors for links you’ve already clicked on and when you “hover” your mouse over them.

You can also add background-color:YOUR COLOR !important to set a particular “background” color for links.

Notes:

• If you want your code to apply to all sites and not just one particular site, put the code in userContent.css “without” the @-moz-document domain(“???”) { } qualifier.

• The color value can one of the “approved” HTML color names or the hex value for any color (#48c9b0)

It’s critical you include the !important; part after the color you selected so it’ll override a site’s “preset” CSS codes.

BTW, userContent.css is located in the chrome folder in your profile folder (%APPDATA%\Mozilla\Firefox\Profiles\) and the last line of mine is

/*
* Force yellow background with red text for "hover" links
*/
a:hover {background-color:yellow !important;color:red !important;}

So when I “hover” over something on a site, it’s “obvious” it’s actually a link and not just some text setup to use the same color scheme as a link.

Reply | Quote

anonymous wrote:

AskWoody is overriding the color that you selected.

That is incorrect.

It is not possible for anything we send to a browser to override anything that is set locally. If a user wishes for all fonts to be rendered as Times New Roman, there’s nothing we can do to stop it.

Reply | Quote

Will Fastie wrote:

It is not possible for anything we send to a browser to override anything that is set locally

That’s not necessarily true.

If the CSS code on a site uses the !important parameter for a particular CSS setting it will override the settings in the local browser (BTDT, had to use a special GreaseMonkey script to reset it back to my choice!)

Reply | Quote

Just another Forum Poster wrote:

If the CSS code on a site uses the !important parameter for a particular CSS setting it will override

Only if the specificity of the override is precise. For example, the three blue buttons in the top banner of this site are just carefully formatted links. Unless the override CSS exactly duplicates the CSS for those buttons, a generic, high-level CSS rule will not affect them.

This is just a rough guess without looking, but I think my personal site has over 20 different formats for links, most of which are very specific. It must be so because otherwise the CSS for each might interfere with others.

I’m not suggesting that it’s impossible to do overrides. I’m just saying that the overrides must be as specific as the CSS definitions for the items being overridden.

Reply | Quote

Just another Forum Poster wrote:

It’s critical you include the !important; part after the color you selected so it’ll override a site’s “preset” CSS codes.

That will only override CSS rules for elements at the same level in the cascade. If a link further down the cascade sets its own background color, the rule you suggested will be ignored. The rule has inadequate “specificity,” notwithstanding the use of !important.

 

Reply | Quote

WCHS wrote:

Where is that Firefox userContent.css file?

What would the code look like if you used a hex code?

To answer your questions:

“Where is that Firefox userContent.css file?”

It’s not a default Firefox file. You need to create it in your Firefox profile folder. You can open your existing profile folder by clicking on Help, More Troubleshooting Information (or Troubleshooting Information in older versions). After opening the profile folder, close Firefox.

If you don’t already have one, create a new folder called chrome in your Firefox profile folder. Then create a new plain text file, paste in the following code, save it as userContent.css (you can do this in Notepad, but make sure that you save the file as userContent.css, not userContent.css.txt, and only capitalize the C in Content) and place that file in the chrome folder. You need to restart Firefox every time you edit the userContent.css file.

@-moz-document domain(“www.askwoody.com”) {
a:link { color: green !important; }
}

In the above code, change color to suit.

Starting with Firefox 69 or so, user styles are disabled by default so you need to go into about:config to enable them and change the following preference from false to true:

toolkit.legacyUserProfileCustomizations.stylesheets

Restart Firefox and test.

Some of the info is outdated but there is more here:
http://kb.mozillazine.org/index.php?title=UserContent.css&printable=yes

“What would the code look like if you used a hex code?”

a:link { color: #008000  !important; }    green
a:link { color: #00FF00  !important; }    lime green
a:link { color: #FF0000  !important; }    red

You can get hex codes here:
https://www.rapidtables.com/web/color/html-color-codes.html

Reply | Quote