typography field doesn't list standard font-families (Arial, Verdana ...)

[kmob2]

Issue description:

I noticed this a few months ago, that the font-families in the typography field, don't display any of the standard font-families, such as Arial, Verdana, Helvetica etc. Those are without a doubt a must have.
Here is a list of all those fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp

Also, I noticed that in the drop down menu for the font-families, there is "serif", "sans serif" and "monospace" listed. I would suggest to remove them, since those are generic families used as fallbacks by browsers.

Version used:

Latest github

Using theme_mods or options?

theme_mods

Code to reproduce the issue (config + field(s))

[aristath]

Actually standard fonts are like this:

Serif

'Georgia,Times,"Times New Roman",serif'

Sans-Serif

'Helvetica,Arial,sans-serif'

Monospace

'Monaco,"Lucida Sans Typewriter","Lucida Typewriter","Courier New",Courier,monospace'

You can see the stack here: 'Monaco,"Lucida Sans Typewriter","Lucida Typewriter","Courier New",Courier,monospace'

The reason they are displayed in the dropdown as simply serif/sans-serif/monospace is space-saving and nothing more. If you select Serif, then 'Georgia,Times,"Times New Roman",serif' will be used as per the link you posted above.

[kmob2]

Hello aristath,

Sorry for opening this up again. I'm only just now continuing the typography on my theme.

I am very confused on why you would group the standard fonts together by "style".
Serif is not a font (typeface) by itself. Serif refers to if a font has a stroke a in their symbols or not. https://en.wikipedia.org/wiki/Serif - Respectively sans serif is without the stroke.

Grouping them all together doesn't really make sense to me, since they are all completely different looking fonts.
In css using font-family, if you have multiple fonts listed, they work as backups.

Example: font-family: "Times New Roman", Times, serif;
The browser first looks if the font Times New Romand is available, if nothing is found, then it looks for Times (which is similar), if again nothing is found, then it looks for all fonts styles that use serif.

The way the typography field currently is in kirki, is that if I select sans serif it outputs 'Monaco,"Lucida Sans Typewriter","Lucida Typewriter","Courier New",Courier,monospace', which are a group of completely different looking fonts, and since only the first one is being used by the browser, because they rest acts as backups, I have no way of selecting for example Courier New.

I really think all the standard web fonts as listed here: http://www.w3schools.com/cssref/css_websafe_fonts.asp should have their own selection field in the drop down. This current way of grouping them together is not really the way the fonts should be used.

[aristath]

The reason they are grouped is because not all operating systems have all fonts.
Since you're using Courier New I'll assume you're on windows.
If you use that, then OSX & Linux machines will not be able to properly render the font, simply because it doesn't exist there.
If you want, you can use the kirki/fonts/standard_fonts filter to change the standard fonts and use whatever you wish. You can see the filter here: https://github.com/aristath/kirki/blob/2.4.0-beta.1/core/class-kirki-fonts.php#L84-L100

Example:

add_filter( 'kirki/fonts/standard_fonts', function( $fonts ) {
	$fonts['sans-serif'] = array(
		'label'  => 'Sans Serif',
		'stack'  => 'Arial,Helvetica,sans-serif',
	);
	return $fonts;
} );

[kmob2]

Yes that is true that they are not all supported, however that is why these fonts along with the fallback fonts are listed as web safe fonts, since they are the most cross-platform supported fonts, along with the closest fallback fonts. So whatever a user chooses, it will be the most cross-platform compatible solution out there. These combinations of web safe have been used since the late 90s, and is common practice for web developers.

I would honestly recommend to include it the way it's listed at http://www.w3schools.com/cssref/css_websafe_fonts.asp

In the selection field, only display the first Font, and in the actual css, include the suggested fallbacks.

I am using this array.

websafefonts = array(
		/* Web Safe Fonts */
		'Arial, Helvetica, sans-serif' => esc_attr__( 'Arial', 'my_textdomain' ),
		'"Arial Black", Gadget, sans-serif' => esc_attr__( 'Arial Black', 'my_textdomain' ),
		'"Comic Sans MS", cursive, sans-serif' => esc_attr__( 'Comic Sans MS', 'my_textdomain' ),
		'Impact, Charcoal, sans-serif' => esc_attr__( 'Impact', 'my_textdomain' ),
		'"Lucida Sans Unicode", "Lucida Grande", sans-serif' => esc_attr__( 'Lucida Sans Unicode', 'my_textdomain' ),
		'Tahoma, Geneva, sans-serif' => esc_attr__( 'Tahoma', 'my_textdomain' ),
		'"Trebuchet MS", Helvetica, sans-serif' => esc_attr__( 'Trebuchet MS', 'my_textdomain' ),
		'Verdana, Geneva, sans-serif' => esc_attr__( 'Verdana', 'my_textdomain' ),
		'Georgia, serif' => esc_attr__( 'Georgia', 'my_textdomain' ),
		'"Palatino Linotype", "Book Antiqua", Palatino, serif' => esc_attr__( 'Palatino Linotype', 'my_textdomain' ),
		'"Times New Roman", Times, serif' => esc_attr__( 'Times New Roman', 'my_textdomain' ),
		'"Courier New", Courier, monospace' => esc_attr__( 'Courier New', 'my_textdomain' ),
		'"Lucida Console", Monaco, monospace' => esc_attr__( 'Lucida Console"', 'my_textdomain' )
);