Font weight different on computer and laptop

[di]

I have a child theme based off Workstation Pro and I'm also using Typekit Fonts for WordPress for Georgia and Roboto typefaces. I believe I have the body font weight set to 300 px, however it's showing up different on different computers. On my desktop it looks the way I'd like it to. On my laptop it looks too heavy. I'm using the same three browsers on both computers: Safari, Firefox and Chrome.

Do I have some settings wrong?

http://projectcreativity.adunate.com

[Victor Font]

You're are loading Roboto from both Google fonts and Typekit on your site. I don't see any code where you're loading Georgia. The typekit js only references Roboto. The differences you are seeing are because the browsers are using the default serif fonts as a fallback because they can't find Georgia.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[di]

Thanks Victor for getting back to me. I'm not fully understanding what you mean...my lack of knowledge:-)

I have Georgia in my header code as such:
h1 {
font-size: 48px;
font-size: 4.8rem;
text-transform: uppercase; /*added*/
font-family: 'Georgia', serif;

}

h2 {
font-size: 36px;
font-size: 3.6rem;
font-family: 'Georgia', serif;
}

h3 {
font-size: 30px;
font-size: 3rem;
font-family: 'Roboto', sans-serif; /*changed from original serif*/
}

h4 {
font-size: 24px;
font-size: 2.4rem;
font-family: 'Georgia', serif;
}

h5 {
font-size: 20px;
font-size: 2rem;
font-family: 'Georgia', serif;
}

h6 {
font-size: 18px;
font-size: 1.8rem;
font-family: 'Georgia', serif;
}

>>>>>>>>>>>>>>>>>>>>>
I then have this as a setting in my Typekit:

textarea {
font-family: 'Roboto Condensed', sans-serif;

}

h1,
h2,
h4,
h5,
h6 {
font-family: 'Georgia', serif;
}

>>>>>>>>>>>>>

Where do I see the Google font settings? Is that in css?

Final question: My problems seems to be a bolded look for both the Georgia and the Roboto fonts when viewed from my laptop. I'm looking for a consistency in weight from all my computers. Any thoughts?

[Victor Font]

Yes, I saw all of that code when I viewed your site. The Google fonts are loaded in functions.php. In fact, you are not loading anything from typekit either. You are not adding fonts. All you are doing is changing CSS and overriding what's in style.css. You are not loading the Georgia font anywhere in your code. As an FYI, I just looked on the Google fonts website. Georgia is a Microsoft font, which means it's probably baked into Windows. It is not available as a web font through Google.

There's an entire process you have to follow when adding fonts to a site. Changing the CSS to invoke the font is the last step. You have to load the font from Google, or download all the versions of a web font and store them in a directory in your child theme folder. By version, I mean the different font formats that are used by the different browsers. Then you enqueue the font style sheets in functions.php or add the @font directives to style.css.

Others may disagree, but my personal preference is to use Google fonts locally because it speeds the site loading time and the browser doesn't have to wait on loading things from Google. This is how I do it: https://victorfont.com/use-google-fonts-locally/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts