“inherit” and Typography Control

  • Resolved ThemeAWESOME

    (@tsquez)


    7 years, 2 months ago

    Hey there,

    Quick question regarding the typography control.

    The main typography control deals with the body and this is where the font for the entire theme is set. The default is Source Sans Pro, the variant is set to regular.

    OK so there are other typography controls in the other sections of the customizer that will, of course allow the user to change the font of the area where a typography control is.

    So instead of going in and setting a default font for every typography control in every section, is there a way to set the font-family to “inherit” so all the other fonts use Source Sans Pro with a variant of regular?

    This is the body typography control

    TotalPress_Kirki::add_field('totalpress_theme_customizer',array(
	'type'        => 'typography',
	'settings'    => 'totalpress_theme_body_font',
	'label'       => esc_attr__('Body Font','totalpress' ),
	'tooltip'     => esc_attr__('Change the font family of your theme. Default is Source Sans Pro.','totalpress'),
	'section'     => 'totalpress_typography_section',
	'priority'    => 1,
	'transport'   => 'auto',
	'default'     => array(
		'font-family'    => 'Source Sans Pro',
		'variant'        => 'regular',
		'font-size'      => '17px',
		'line-height'    => '1.5',
		'letter-spacing' => '0',
		'subsets'        => array('latin-ext'),
		'text-transform' => 'none'
	),
    'choices' => array(
        'variant' => array(
            'regular',
            '700',
            '900',
        ),
    ),
	'output'      => array(
		array(
			'element'  => 'body',
			'function' => 'css',
			'property' => 'font-family,font-size,font-weight,line-height,letter-spacing,text-transform',
		),
	),
));

    I played around and created the following typography control for a customizer section:

    TP_Primo_Kirki::add_field('totalpress_theme_customizer',array(
	'type'        => 'typography',
	'settings'    => 'tp_primo_post_title_font',
	'label'       => esc_attr__('Post Title Font','tp-primo'),
	'tooltip'     => esc_attr__('Change the font family of post titles. Default is inherit, 35px, 1.2','tp-primo'),
	'section'     => 'tp_primo_post_typography_section',
	'priority'    => 1,
	'transport'   => 'auto',
	'default'     => array(
		'font-family'    => 'inherit',
		'variant'        => '900',
		'font-size'      => '35px',
		'line-height'    => '1.2',
		'letter-spacing' => '0',
		'subsets'        => array('latin-ext'),
		'text-transform' => 'none'
	),
    'choices' => array(
		'fonts' => array(
			'standard' => array(
				'inherit',
				'serif',
				'sans-serif',
				'monospace',
			),
		),
        'variant' => array(
            '900',
            '700',
            'regular',
        ),
    ),
	'output'      => array(
		array(
			'element'  => '.post h1.entry-title,.post h2.entry-title,.post h1.entry-title a,.post h2.entry-title a',
			'function' => 'css',
			'property' => 'font-family,font-size,line-height,letter-spacing,text-transform',
		),
	),
));

    Now, I don’t even know if that’s correct, but inherit did show up in the list of available fonts. Cool. So for this particular control I changed the font to Montserrat, with a variant of 900…worked great.

    So then I decided to switch it back, so I selected “inherit”, worked like a charm BUT i did notice that the variant got set to regular. So I went in to change it to 900 BUT 900 was not available, only 700.

    So it worked but only kinda worked…lol.

    What yah think? Any help is greatly appreciated.

    • This topic was modified 7 years, 2 months ago by ThemeAWESOME.
    • This topic was modified 7 years, 2 months ago by ThemeAWESOME.
Viewing 8 replies - 1 through 8 (of 8 total)

  • I think this is a great feature request!
    But needs some caution…
    Using inherit as default makes perfect sense.
    However before I implement it we’d first need to decide how font-weight would be handled. If there are only 2 typography controls things are pretty simple, but if there are multiple typography controls then things get a bit more complicated.
    Allow me to post my slightly chaotic thinking here in hopes that it will make some sense.

    Example:

    Control 1 sets the typography for body.
    Control 2 sets the typography for #content.
    Control 3 sets the typography for #content h3.

    User selects a font-family for control-1. If they set control-2 to inherit, then the font-family will be the same as the one in control-1, therefore the font-weights available in control-2 will have to be the ones from control-1.

    If the user selects a font-family for control-1 and then sets both control-2 and control-3 to inherit, then both control-2 and control-3 will have to inherit the font-weight options from control-1 and show these so that the user may select a different font-weight.
    If however they change the font-family in control-2 from inherit to say Roboto, then control-3 will no longer have to show the font-weights of the font selected in control-1, but instead show the font-weights of control-2.

    It can get really messy…

    Another option would be to completely hide the font-weights if the selected font-family is inherit, and assume that the user just wants the whole thing inherited. But I hate making assumptions… On the other hand making assumptions is the only way to avoid messy situations.

    And I’m not sure that inherit belongs in the default fonts… I mean if the parent font is a google font, then inherit is not a standard font. It’s a standard option, but not a standard font.

    Another option would be to use a checkbox for inherit, and completely hide the typography control if the checkbox/switch/toggle is enabled.
    Hidden fields in Kirki by default don’t output any CSS, so that should also work and be a lot cleaner for users. But that would mean that they wouldn’t be able to inherit the font-family and use a different font-weight. But that might be even better… after all one of the key philosophies of WordPress is Decisions, not Options.
    So I think that might work best… removing the inherit option from the default fonts list, and instead just add a checkbox, and use an active_callback in the typography to only show the control when the checkbox is not selected.

    Confused yet? ??
    I hope the above made some sense…

    Thread Starter ThemeAWESOME

    (@tsquez)

    LMAO…totally cornfused ??

    No really it made perfect sense. Sometimes when we think about an option we would like to see we don’t think about the actual outcome for everything involved. This is a prime example. I didn’t think that inherit meant the font weight (variant) as well. I thought it was just the font-family itself, so I learned something new today, thank you.

    I’m curious to see what you come up with. Thanks for taking the time to think about it and lay it out the way you did.

    Well, the problem here is that it’s a typography control, not just font family. If you choose font-family:inherit, then the font weight will not be inherited by default. It could… But should it? Or should it not? Should the user be able to use inherit for font-weight too? Doesn’t that make things a bit overcomplicated?
    Should the font-family be inherited? Or the typography? If we want the whole typography thing to be inherited, then the checkbox + active_callback concept makes a lot more sense.

    P.S. that’s how people get migraines.

    Thread Starter ThemeAWESOME

    (@tsquez)

    HAHAHA I can see how that would happen.

    See my whole idea was to allow the user to choose a font for the site via the customizer. However, the theme allows the user to also make each post and page look different. So I thought I should give them the ability to set a different font for posts and pages as well.

    Personally I think that the only inherit should be allowed on the font-family not the font-weight (variant), font-style etc.

    I do see what you are getting at and I am curious to see how it works. So I say roll with it ??

    • This reply was modified 7 years, 2 months ago by ThemeAWESOME.

    Added ‘inherit’ in the next version, so I’ll go ahead and close this ticket ??

    Thread Starter ThemeAWESOME

    (@tsquez)

    AWESOME!!! Great work amigo.

    So do we add it like this:

    'font-family' => 'inherit',

    or what should we do. Thanks again.

    Yep, that’s all. Just use inherit as the default value for font-family ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘“inherit” and Typography Control’ is closed to new replies.