Theme update: removed Google font

Hello Guido.

I have been using your theme Multicolors in modified form for years and love it.

In the last update you removed Open Sans and I realized for the first time that the font is made in some way ‘uniwidth’ so far, although the Open Sans is not at all.

How was this realized in the theme and why doesn’t it work with Verdana?
Please help me understand!

Best regards
Stephan

Hi Stephan,

I have updated this reply:

Open Sans was directly loaded from the Google servers and the only thing I did was include the relevant files. I have not removed any CSS styling from theme stylesheet except the font family (Open Sans). And because Verdana is a system font, it can look somewhat different between browsers.

You can install the Fonts plugin if you want more control.

Guido

Hi Guido.

Thank you very much for your answer.

I am Swiss and my website too, so the GDPR does not apply to us until now and I have reactivated the Google Fonts in Multicolors until further notice ??.

What I meant by my question is technical and I don’t understand the following:
So I’m using Open Sans and I set {font-weight: bold} for a:hover. Nevertheless, the labels of a link do not get wider when hovering. Why not in multicolors? On other sites with Open Sans it becomes wider (Open Sans is not uniwidth). I deeply searched the theme’s code but didn’t find anything.
Do you have an explanation for this?

All the best for a nice weekend.
Stephan

–

Hi Stephan,

But did you also include the Open Sans font via theme functions file again? Because I’ve removed the loading from that file. Installing the Fonts Plugin is not an option fo you? It’s quite lightweight and works fine.

Guido

Hi Guido.

Thanks.

Yes, of course I did and it all works perfectly. I have absolutely no problem with the theme, I only have one question that interests me a lot:

Why does Open Sans behave like a uniwidth font in your theme even though it isn’t?

More precisely in an example: In the menu line, the menu items in Open Sans remain exactly the same width, although I have set text-decoration to none and font-weight to bold for a:hover.
With Verdana, the items become wider and therefore shift.`

Stephan

Aha, NOW I understand what your mean. Open Sans behaves different in my theme compared to other themes. I have to look into that. But I guess you already know my themes have a very simple setup, they contain absolutely no hidden stuff. Only thing I can think of now is the background of MultiColors…maybe Open Sans cannot handle all background colors properly? Just a wild guess.. But I will compare it with another theme later today. To be continued.

Guido

Thank you for your commitment!

Here is my application of your theme: https://cantone-libero.ch/

Hi,

With the Fonts Plugin installed the Open Sans has the same hover behavior as many other fonts: items are shifting.

This file is used by the plugin.

My theme is loading another file from the Google server, this one.

Somehow there’s something in this file that is preventing shifting upon hover..

Guido

Hi again,

Did some more testing. I don’t know why the links in my theme are not shifting upon hover (with font weight bold), was not able to find the cause. So it must be something in the content of the file my theme is using. And this file is loaded directly from the Google server, as mentioned before. So it’s not caused by my stylesheet. I did not even make changes in my stylesheet in last update, besides the font family.

If you Google this hover issue, you will find many posts about this and there are multiple CSS fixes around.

Maybe I will open a topic at the forum of the Fonts Plugin, the developer is always willing to help.

Guido

Hi Guido.
I have also just done some tests and found the explanation for the “phenomenon”.
Unfortunately, it is quite simple.

The font file your theme uses contains only one, the typeface Open Sans regular (400). The CSS font-weight:bold statement is therefore simply implemented by the browser by directly manipulating the font.

The font file of the Fonts Plugin, on the other hand, contains all typefaces, from Open Sans Light to Extra Bold (300-800) and the bold statement is implemented by replacing the typeface which have different widths (https://fonts.google.com/specimen/Open+Sans).

Thank you very much for your thoughts. Your tip with the different font files helped me a lot.

Best wishes.
Stephan`

The CSS font-weight:bold statement is therefore simply implemented by the browser by directly manipulating the font.

Aha, obviously I did not know this!

Mainly because the Fonts Plugin did such a great job I decided to fully remove the Google font from my themes. Unfortunately I did not stumble upon this minor issue, although there’s not an easy fix for this I think.

Guido

I think that if you consistently download only the font weights ‘normal’ for in the Fonts Plugin and use them locally, then the bold statement should again only be implemented by the browser.

Stephan

Question: Does the Pro version of the Fonts Plugin include lifetime updates or only on an annual basis?

Hi Stephan,

I don’t use PRO version myself and the pricing (lifetime or annual) is also not clear to me. Guess best thing to do is ask developer of that plugin.

Guido