- This topic has 5 replies, 2 voices, and was last updated 5 years, 11 months ago by Tom.
-
AuthorPosts
-
April 11, 2018 at 2:27 am #547084André
Hey Tom – like with Josh, I’m trying to use a webfont from Cloud.Typography.com
Here are the fonts styles:
https://www.dropbox.com/s/ae0d13l4ddm3mki/Screenshot%202018-04-11%2011.28.29.png?dl=0
I’ve followed your instructions (taken from Josh’s post), and have added this code to Code Snippet:
add_filter( 'generate_typography_default_fonts', 'tu_add_system_fonts' ); function tu_add_system_fonts( $fonts ) { $fonts[] = '"Sentinel SSm A", "Sentinel SSm B"'; return $fonts; }
I’ve also added the required stylesheet to our header:
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6849836/6969992/css/fonts.css" />
After doing this, the font “kinda” shows within Customizer in two places:
1.) Just above Google Fonts:
https://www.dropbox.com/s/q2bhv6lguilw9q0/Screenshot%202018-04-11%2011.13.09.png?dl=0
2.) Right at the bottom of the list, but listed as both fonts:
https://www.dropbox.com/s/z0agzndq8bzbxth/Screenshot%202018-04-11%2011.12.47.png?dl=0
Selecting #1 above renders an incorrect font. And #2 just says “No results found” for Font family.
However:
If I add the CSS to our custom CSS stylesheet like this:
body { font-family: "Sentinel SSm A", "Sentinel SSm B"; font-style: normal; font-weight: 400; }
… then the font renders correctly.
Can you tell why the Customizer isn’t causing the fonts to render correctly?
Thanks!
André
April 11, 2018 at 9:46 am #547539TomLead DeveloperLead DeveloperThe filter doesn’t accept multiple values like that currently.
As a workaround, we can filter the System Stack font:
add_filter( 'generate_typography_system_stack', 'tu_overwrite_system_font' ); function tu_overwrite_system_font() { return '"Sentinel SSm A", "Sentinel SSm B"'; }
Then choose the “System Stack” option in the list.
April 12, 2018 at 2:32 am #548115AndréTom, I tried this, and selecting “System Stack” seems to work.
Is that correct (selecting ‘System Stack’ from the font list)?
Followup question – what do I do if I wanted to call different fonts from Cloud.Typography.com, for headlines, etc – how would that work?
I don’t mind coding all the font declarations in the custom CSS to override the Customizer if that’s an easier less “messy” way to handle different cloud fonts from Typography.com.
I guess my only concern is that GP doesn’t load unused font needlessly that are already defined in the Customizer.
If coding fonts into the custom CSS, would you suggest that a default font like Arial or Georgia be selected for all the options within the Customizer, then put all the overrides in the custom CSS?
Thx again, Tom.
April 12, 2018 at 9:21 am #548588TomLead DeveloperLead DeveloperIf that’s the case, I do suggest using CSS.
The Customizer only loads Google Fonts if they’re set. If no Google Fonts are set, no font files will be loaded at all. You can set them to “inherit” if you’ll be setting fonts elsewhere.
That way you can just use @font-face in your CSS.
April 12, 2018 at 2:13 pm #548781AndréTom, perfect – will do that then.
Do you have a support doc with the CSS styles for all the typeface areas within the Customizer – or do I just use Inspector?
April 12, 2018 at 8:50 pm #548954TomLead DeveloperLead DeveloperWe don’t, although that is a good idea.
Inspector is best for now, and if you need help with one, just let me know 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.