version 1.3 breaks custom fonts

Hi,

I happened to update this plugin this morning on a project to version 1.3 and it has lost all my custom fonts.

I went from seeing this for each font listed:

https://share.getcloudapp.com/5zuAxJDG

To seeing this:

https://share.getcloudapp.com/04uJBgKX

So it looks like the options have changed and the way the font files are saved in the database has changed. But the fonts are then not being loaded on the front end any more.

Here’s a before:

https://share.getcloudapp.com/Jru1276O

And an after the update:

https://share.getcloudapp.com/p9u815wr

Before the update, my page contains:

@font-face { font-family:Bliss2 Bold;src:url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2b-webfont.woff) format('woff'), url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2b-webfont.ttf) format('truetype'), url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2b-webfont.svg#bliss2_bold) format('svg');font-display: auto;}@font-face { font-family:Bliss2 Italic;src:url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2i-webfont.woff) format('woff'), url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2i-webfont.ttf) format('truetype'), url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2i-webfont.svg#bliss2_italic) format('svg');font-display: auto;}@font-face { font-family:Bliss2 Light;src:url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2l-webfont.woff) format('woff'), url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2l-webfont.ttf) format('truetype'), url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2l-webfont.svg#bliss2_light) format('svg');font-display: auto;}@font-face { font-family:Bliss2 Light Italic;src:url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2li-webfont.woff) format('woff'), url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2li-webfont.ttf) format('truetype'), url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2li-webfont.svg#bliss2_light_italic) format('svg');font-display: auto;}@font-face { font-family:Bliss2 Regular;src:url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2r-webfont.woff) format('woff'), url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2r-webfont.ttf) format('truetype'), url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2r-webfont.svg#bliss2_regular) format('svg');font-display: auto;}

And after the update:

@font-face {font-family: "Bliss2 Bold";font-display: auto;font-fallback: ;font-weight: 400;src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2b-webfont.woff) format('woff'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2b-webfont.ttf) format('TrueType'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2b-webfont.eot) format('eot'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2b-webfont.svg) format('svg'); } @font-face {font-family: "Bliss2 Italic";font-display: auto;font-fallback: ;font-weight: 400;src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2i-webfont.woff) format('woff'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2i-webfont.ttf) format('TrueType'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2i-webfont.eot) format('eot'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2i-webfont.svg) format('svg'); } @font-face {font-family: "Bliss2 Light";font-display: auto;font-fallback: ;font-weight: 400;src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2l-webfont.woff) format('woff'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2l-webfont.ttf) format('TrueType'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2l-webfont.eot) format('eot'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2l-webfont.svg) format('svg'); } @font-face {font-family: "Bliss2 Light Italic";font-display: auto;font-fallback: ;font-weight: 400;src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2li-webfont.woff) format('woff'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2li-webfont.ttf) format('TrueType'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2li-webfont.eot) format('eot'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2li-webfont.svg) format('svg'); } @font-face {font-family: "Bliss2 Regular";font-display: auto;font-fallback: ;font-weight: 400;src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2r-webfont.woff) format('woff'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2r-webfont.ttf) format('TrueType'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2r-webfont.eot) format('eot'); src: url(https://wat-shop.test/wp-content/uploads/2020/07/bliss2r-webfont.svg) format('svg'); }

It looks like you’re outputting:

src: url(<url1>) format(<format1>);
src: url(<url2>) format(<format2>);

when you should be outputting:

src: url(<url1>) format(<format1), url(<url2) format(<format2>);

I changed the code that outputs this in classes/class-bsf-custom-fonts-render.php to:

$font_face_css .= 'src: ';
$font_face_css .= implode(',', $value);

And my fonts work again.

Is this a known issue? Can you get it fixed please?

• This topic was modified 4 years ago by Ross Wintle.