Font weight correct when viewed in Customizer but not regular view

juliemcleod · Member · Feb 1, 2015 at 11:58 pm
Copy link

Add topic to favorites
I’ve added the following to change the text appearance of the “read post” link on my most recent post:
```
.read-more {
	font-family: "omnes-pro", Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-weight: 200;
	text-transform: lowercase;
}
```
I see the change in font weight appear as expected in the preview as I enter the code and then after clicking Save. Then, when I leave the CSS Customization page and access my blog as a visitor would, the font weight has not been corrected.

Help would be appreciated.

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Feb 2, 2015 at 8:17 am
Copy link
I don’t know why would the font-weight would not take effect after you saved the CSS.

How about you try the other possible values from 300, 400, 500 through to 900 and see if any number other than 200 makes any difference?
juliemcleod · Member · Feb 2, 2015 at 3:05 pm
Copy link
Thank you. I tried your suggestion and it seems that the weight matches in CSS preview and the live blog only when the weight is at 600. Another thing I noticed is that the font being used is not displaying the same in the CSS preview compared to the live blog. I am using Chrome to view both.

I’ve also found another query about the same issue. It’s HERE. I wonder if I should report in the themes section of the forum. Any thoughts?
staff-happychia · Staff · Feb 3, 2015 at 8:51 am
Copy link
As staff are already aware of it, I suggest you watch the linked ticket rather than reporting this same issue again :-)
juliemcleod · Member · Feb 3, 2015 at 12:57 pm
Copy link
Thanks. I decided to put in a ticket since the theme in question in the other report was different from mine.
designsimply · Member · Feb 14, 2015 at 8:16 pm
Copy link
This is a side effect of how the live preview system works with custom fonts. What is happening is that all variations of fonts are loaded in the customize view—this is done so that changes can be viewed faster while previewing. However, on the front end, only the selected font-weight attributes are loaded. Those selections can be limited sometimes (i.e. the weights), and I’ve found that sometimes it depends on the individual font too. Basically though, it’s just a bit tricky. It’s not ideal that more font variations get loaded in the preview view than may show up on the front end if you are keen to work with really detailed font weights. It was set up that way with fast load times in mind and the idea of making the best balance for the most users when it comes to what fonts and font variations are loaded while still keeping things as fast as possible on the front end.

On WordPress.com, which variation of a font is loaded is affected by the setting just to the top right of the font selection. In your case, you have selected Omnes Pro Extra Light https://cloudup.com/cZsfUPWuOOZ and so the 200 weight extra light one is what gets loaded on the front end. To get a bold affect on that font, the type is rendered by the browser and there are less weight variations (i.e. lighter, normal, bold) than there are if you were to load every single variation of the font (i.e. 100 to 900).
juliemcleod · Member · Feb 15, 2015 at 2:19 pm
Copy link
Thank, designsimply. I appreciate you taking the time to explain. :)
designsimply · Member · Feb 15, 2015 at 4:33 pm
Copy link
Sorry it’s a bit complicated! It leans toward fast previews and fast front end page loads in different ways though, which is good. :)

No items found.