Why do all font styles become italic?

Hi @aliasnille,

Is it affecting how the font looks on the frontend? Also, please share a screenshot that show the Custom Fonts section. In the screenshot you shared, you cropped it so it shows only the section of how the font looks. Please also include the section next to it.

I look forward to hearing from you.

Kind regards,
Herman ??

This seems to be a common problem for some of us who use this plugin. Therefore, you should not need to make a quick fix, but the developers behind should be able to fix this.

Hi @aliasnille, sorry for the delay.

Would you please share a screenshot I asked previously? Or if possible, please share a video showing the steps to replicate this.

I look forward to hearing from you.

Kind regards,
Herman ??

An update.

I have tried to work around the problem.

If I use TTF and not WOFF or WOFF2, then it works as it should.

Hi @aliasnille & @sgpcreativa,

We recently released an update. Please update the plugin to the latest version and let us know if you still face the issue.

Please let us know how you go.

Kind regards,
Herman ??

Still the same problem: https://ibb.co/tB27B2X

I have also tried on a fresh installation, but nothing changed.

Hi @aliasnille,

I discussed this with our team, and it turns out that, technically, this isn’t an issue.

The reason you’re experiencing this because the fonts are set up the same way. This means they share the same style and weight. When this occurs, the system only uses the settings from the last one that was set up.

Think of each version of the font as being stored in a container, and the container’s ID is determined by its style and weight settings. In this situation, because they have the same style and weight, they essentially have the same container ID. So, when the system tries to apply the font, it gets confused and applies the settings from the last one it read.

This problem only appears in the preview and the font should work as it should on the frontend. To resolve it, you simply need to adjust either the style or weight settings of one of the versions. This way, each version will have its own unique container ID, and the system won’t become confused anymore.

I hope that clarifies and clears any confusion you may have.

Kind regards,
Herman ??

Hi,

I think it’s necessary that sometimes we need to have the same font-family, but just different font files for different font styles.

Understood we could have separated the normal and italic font styles to two distinct fonts via Custom Fonts plugin, and subsequently tag each font to different set of selectors. For example normal style for <body/> and italic for <em/> respectively. But this might not work for elements with CSS rule of font-style: italic;, especially when we use third party widgets which we have no control over their implementation at all.

Technically, you are right, it’s not an issue. But in reality, this might not be an ideal solution. May I propose a solution by adding the following line of code to function bcf_prepare_lfont_face_css under file helper-functions.php

$font_face .= ! empty( $variation_data['font_style'] ) ? "\tfont-style: " . $variation_data['font_style'] . ';' . PHP_EOL : '';

The chunk of code should look similar to

$src        = array();
	$font_face  = '@font-face {' . PHP_EOL;
	$font_face .= "\tfont-family: '" . $font_family . "';" . PHP_EOL;
	$font_face .= ! empty( $variation_data['font_style'] ) ? "\tfont-style: " . $variation_data['font_style'] . ';' . PHP_EOL : '';
	$font_face .= ! empty( $variation_data['font_weight'] ) ? "\tfont-weight: " . $variation_data['font_weight'] . ';' . PHP_EOL : '';
	$font_face .= ! empty( $font_data['font_display'] ) ? "\tfont-display: " . $font_data['font_display'] . ';' . PHP_EOL : '';
	$font_face .= ! empty( $font_data['font_fallback'] ) ? "\tfont-fallback: " . $font_data['font_fallback'] . ';' . PHP_EOL : '';

Please consider this code change and hope it helps.