CSS Font-weight 600 (semi-bold)

[The Old Man]

Hi,

No real issue, improvement perhaps but I noticed that there are just a few CSS semi-bold font-weights of 600, such as the one that highlights the current active page in the primary menu, for embedded content titles and the semi-bold class itself, but the Google Fonts integration doesn't currently load that font; browsers make a best match or blend. I was surprised at the noticable visible difference when loading 600 using latest Firefox Win 10.

Obviously but this won't be an issue at all if/when IPS eventually changes to the GF APIv2 and switch to Variable Fonts, but for now it can be improved for clearer legibility by loading value 600 in template > global > global > fonts.css (as shown below) or if you don't want the additional initial load time, change all the 600's in the CSS templates to 500 or 700 or change the 700i to 600.

{{if ( theme.headline_font && theme.headline_font !== 'default' ) || ( theme.body_font && theme.body_font !== 'default' ) }}
	{{if theme.headline_font == theme.body_font}}
		<link href="https://fonts.googleapis.com/css?family={expression="\IPS\Http\Url::encodeComponent( \IPS\Http\Url::COMPONENT_FRAGMENT, \IPS\Theme::i()->settings['body_font'] )"}:300,300i,400,400i,500,600,700,700i" rel="stylesheet" referrerpolicy="origin">
	{{else}}
		{{if ( theme.headline_font && theme.headline_font !== 'default' )}}
			<link href="https://fonts.googleapis.com/css?family={expression="\IPS\Http\Url::encodeComponent( \IPS\Http\Url::COMPONENT_FRAGMENT, \IPS\Theme::i()->settings['headline_font'] )"}:300,300i,400,500,600,400i,700,700i" rel="stylesheet" referrerpolicy="origin">
		{{endif}}
		{{if ( theme.body_font && theme.body_font !== 'default' )}}
			<link href="https://fonts.googleapis.com/css?family={expression="\IPS\Http\Url::encodeComponent( \IPS\Http\Url::COMPONENT_FRAGMENT, \IPS\Theme::i()->settings['body_font'] )"}:300,300i,400,400i,500,600,700,700i" rel="stylesheet" referrerpolicy="origin">
		{{endif}}
	{{endif}}
{{endif}}

 

Edited March 11, 2022 by The Old Man