font-weight not "sticking"

barrygcooper · Member · Jul 1, 2014 at 8:35 am
Copy link

Add topic to favorites
Hey all,

I’m trying to change the font-weight of my blog title and description. I’m using this CSS:
```
.site-description:before {
	margin: .1em 1em auto;
	background: none;
	font-weight: 100;
}

.site-title a {
	color: #ffffff;
	opacity: 1;
	font-weight: 100;
}

.site-description {
	font-weight: 100;
	color: #ffffff;
	opacity: 1;
}
```
This has the desired effect using the WordPress “customise” slide out window – I can see the font being changed as I alter the font-weight. However, when I actually visit barrycooper.com, the font is still thick.

I’ve tried adding the !important element, but this has no effect. Any ideas what’s causing the font-weight not to stick?

Thank you!

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Jul 2, 2014 at 11:09 am
Copy link
This is because of how custom fonts are loaded in the customize screen versus the front end. It’s a little confusing and I’m sorry for that! What happens is that the fonts are all loaded in the customize screen so you can quickly switch between them. However, on the front end, loading all the and all the versions of the fonts all the time would be wasteful and cause pages to load slower for visitor (which we try to avoid).

The reason font-weight: 100 doesn’t work without also selecting the thin font is because the font-weight: 100 (i.e. thin) version of the font isn’t being loaded on the front end unless it is selected.

To solve this, what you can do is use the settings in the Appearance > Customize > Fonts panel. If you wan to load a very thin version (i.e. font-weight: 100) of the Brandon Grotesque font you have selected, you should select “Thin” in the box just above and to the right of the font. Whatever you select there will be loaded on the front end of the blog. You can only select two fonts (i.e. headings and body text) and you may only select one font type (i.e. thin, medium, etc) per font selection and those are the ones that will work on the front end.
barrygcooper · Member · Jul 2, 2014 at 11:20 am
Copy link
Very helpful – thank you designsimply. So if I’m understanding right, there’s no way to change the weight of the title/description ONLY – I have to change the weight of ALL occurrences of Brandon Grotesque on my blog?
designsimply · Member · Jul 2, 2014 at 11:33 am
Copy link
Correct. Sorry for the trouble!
barrygcooper · Member · Jul 2, 2014 at 11:33 am
Copy link
Hey, that’s ok. Sometimes you can have too many choices :)
designsimply · Member · Jul 2, 2014 at 11:34 am
Copy link
That’s so true. :)

No items found.