version 1.3 breaks custom fonts

  • Resolved Ross Wintle

    (@magicroundabout)


    3 years, 8 months ago

    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 3 years, 8 months ago by Ross Wintle.
Viewing 15 replies - 1 through 15 (of 17 total)
  • Thread Starter Ross Wintle

    (@magicroundabout)

    I’ve raised this as a Github issue too:

    https://github.com/brainstormforce/custom-fonts/issues/46

    Same here. Luckily I applied it in a staging environment. So I’m sticking to the previous version….

    Broke my fonts too – unfortunately I couldn’t get your code snippet fix to work above, I had to revert to a previous backup using Updraft, which thankfully worked.

    to other users DO NOT UPDATE TO 3.0, STAY AT 1.2.6 UNTIL THIS IS FIXED!

    Same here!

    Yep, same here! Some of the fonts I set through Astra’s Global Typography settings stuck, but any ones I defined in my custom CSS are getting ignored. When I added !important to test to see if the CSS was being recognized, it fell back to the second font in the font-stack and just ignored the one configured via Custom Fonts. When I remove !important, it defaults to Helvetica, which I don’t have defined as a fallback font anywhere.

    Please fix ASAP!! Thank you ??

    Incidentally, reverting to the previous version of the plugin didn’t resolve the broken fonts. They just changed from Helvetica to my browser’s default font ??

    @magicroundabout, thank you for your diligent work on this issue and for suggesting a temporary fix. Which specific line(s) of code should be replaced with your new code? I tried in the 359-360 area per your Github post but no luck. Thanks!

    Plugin Support Team Brainstorm Force

    (@brainstormteam)

    Hello @michaelsandmichaels and others,

    Sorry for any inconvenience!

    We are checking the same, already working and testing a fix, we shall release an update soon.

    Thread Starter Ross Wintle

    (@magicroundabout)

    @michaelsandmichaels Reverting doesn’t work because the update to 1.3 changes how the options are stored. The older version doesn’t recognise the updated options format. So if you revert the plugin you’ll need to revert your database (or at least the wp_options table) too. This may impact your site in other ways.

    The code change is to change:

    
  foreach ( $value as $font_file ) {
    $font_face_css .= 'src: ' . $font_file . '; ';
  }

    to:

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

    This is on line 359 of classes/class-bsf-custom-fonts-render.php in the plugin.

    Hope that helps.

    Plugin Support Team Brainstorm Force

    (@brainstormteam)

    Hello @magicroundabout and others,

    We have released an update to fix this, please confirm how that goes. ??

    @magicroundabout, thanks for following up with more details!

    @brainstormteam, thank you for the speedy turnaround—unfortunately, my custom CSS fonts still aren’t working ??

    Thread Starter Ross Wintle

    (@magicroundabout)

    Yep, looks good here. Thanks for the quick fix.

    Plugin Support Team Brainstorm Force

    (@brainstormteam)

    That’s perfect, @behzadh / @magicroundabout

    Glad to hear that resolved the issue.

    —-

    @michaelsandmichaels Please try clearing cache if there’s any, and if the issue persists, we are more than happy to take a further look.

    Maybe, you can share the link to your page or open a quick ticket through Astra’s Support Portal. ??

    @brainstormteam, yep, I cleared cache, but the same fonts are still broken. I’ll go ahead and submit a support ticket. Thanks!

    Hi! the issue persists in my site. I didn’t add any extra code like Ross Wintle suggested because I’m not skilled enough for that, if that helps you. But I did try reverting and it didn’t help. Then it auto-updated again to 1.3 because I forgot to stop the automated updates, then I manually updated to 1.3.1
    My site is https://www.foreverbarcelona.com
    Deleted caches too.
    Thanks for your help!

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘version 1.3 breaks custom fonts’ is closed to new replies.