Google Font

[ROBIN]

I wanted to add a Roboto Light option  to my Font options

This is what I added for the embeded option

<link rel=”preconnect” href=”https://fonts.googleapis.com”&gt; <link rel=”preconnect” href=”https://fonts.gstatic.com&#8221; crossorigin> <link href=”https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap&#8221; rel=”stylesheet”>

This is what I added for the Font Family

.roboto-thin { font-family: “Roboto”, sans-serif; font-weight: 100; font-style: normal; }

It doesn’t seem to have changed anything from basic Roboto.

The page is the theredhenstudio.com

Did I miss Something?

[scrambler]

Which text in the page is supposed to have the font, and how did you select the font for it (option, custom CSS…)

[ROBIN]

I figured out I didn’t do something right because I had to remove it to be able to see the visual screen.

To get the first code I went to Google Fonts and Custom page on Weaver, then copied the embedded code from Google fonts. Then went to CSS classes and pasted that code.  That showed it in my drop down, but it didn’t work

I then selected from the fonts on the embedded fonts option.

 

 

[scrambler]

Not following.

Did you figure it out?

[User]

@ROBIN

FYI there’s an interesting set of instructions here:

https://quadlayers.com/add-google-fonts-to-wordpress/

Regards!

[ROBIN]

I didn’t figure it out.  I have done this a thousand times, but it isn’t working with the information from Google.  The Instructions talk about a red circle that isn’t there anymore and I am wondering if I am missing a step since Google changed something?

[scrambler]

I cant access your site any more it takes me to a parked godaddy page

[User]

@scrambler

I can get there now on https://theredhenstudio.com/

Regards.

[scrambler]

I think there might be a conflict with the theme.

The Theme already includes the Roboto font family, but it appears to only has two weight, below 500 and above 500.

The google roboto font appears to offer more weights, including the 100 you are seeking.

@weaver, Is it normal that the theme roboto fonts only recognizes two weights, and if so how can someone add the same roboto font from google with more weight, given there is already a roboto font in the theme?

 

[Weaver]

I don’t really know the answer to this one.

But – Weaver is now self-hosting the Google fonts provided. And by design, Weaver only supports what I picked “standard” font weights – normal, and bold, I think.

So if Weaver is pre-loading its self hosted Google fonts, I’m not sure what might happen if one tried to upload some Google font (e.g., Roboto) after Weaver has loaded its self-hosted version of Roboto.

WordPress has very strongly suggested not using Google hosted fonts:

In compliance with the General Data Protection Regulation (GDPR), Google Fonts collect users’ data, which means the usage of Google Fonts on your website will violate GDPR guidelines and put you at risk. (If your site is visited from EU sites. I’m not sure that the EU is actively doing anything about web sites that violate GDPR, but WP recommends against it.)

Thus, most themes that support Google fonts as part of the theme are now self-hosting them.

There are plugins that automatically detect the Google font list you try to use, and removes your Google font include with its own locally hosted versions. It is possible that using such a plugin to force a local font file might overcome the issue for Roboto weights.

 

[ROBIN]

Does this mean we can’t add additional fonts?

[Weaver]

I think it should be possible to add different font families other than the Google fonts now self-hosted by Weaver, but the definitions for different weights may not work as expected.

But when you go to the Google Font page, it will let you select fonts and weights, and generate the proper statements to include the ones you select on a website – WP or other.

[scrambler]

The problem I think is the font you are adding is already there just with less weight options.

[Weaver]

Note: The design of the Font Selections offered by Weaver were very carefully selected.

As a general design rule, it is usually not a good idea to use too many font options. One common design paradigm is to use “matched” Sans and Serif fonts mixed for contant vs titles. And having too many variations for font weight is also not necessarily a good design.

So, Weaver offers a limited set of font weights under the design guide that it is often not good design to have more than a limited number of font weights for a given font.

And the way Google Fonts are loaded does seem to not support loading different weights of the same font with multiple font definitions of the same family.

So one possibility would be to use a font similar to Roboto when you want a very light weight font.

[User]

Hi Robin,

For what it’s worth, my experience is that most websites are now accessed mostly by phones, and the four phones I have access to, render fonts so diffently, it hard to believe it’s the same font and weight I am seeing.

Given that the font you’ve chosen is already thin, will the lighter version you seek be noticably different to most site users?

I appreciate desktops will render a better appearance, but do phones with this particular font?

The phones I use are Vivo, Oppo, Huawei and Samsung….

Just curious….

Regards!

[ROBIN]

Thanks everyone.  The client is an artistic type and she was very specific.  In the end, I used Lato and softened the color of the text and I think she is happy.

I still am not sure how to add different fonts from the Fonts section.  It seems that the Google Font site has changed and is offering a different code than @Weaver is needing.

I always appreciate everyone’s help so much.

Thank You!

[Author]

Posts