FVM Munging Font Names

  • Resolved TheRealMikeD

    (@therealmiked)


    4 years, 8 months ago

    Using FVM 2.8.0.

    It seems that something in the minification code substitutes the hexcode “#000” for the word “Black” in CSS files. This is a problem for font names that include the word “Black.” For example, I am using a font on one site called “Circular Std Black” and the minify process is converting it into “Circular Std #000,” which obviously doesn’t exist. As a result, the elements that use that font are styled incorrectly.

    I implemented a temporary fix by renaming the font. But this sort of thing is bound to happen to other users as well, so I wanted to let you know about it.

    I noticed this behavior start with FVM version 2.7.9, although I couldn’t swear that it wasn’t happening with prior versions. I might just not have noticed it until 2.7.9.

    Awesome plug-in! Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Raul P.

    (@alignak)

    The library that takes care of minification is PHP Minify (same used on W3TC, wp rocket, etc) and it has been updated on v2.7.8 from their latest release.

    I did some testing, and this happens when you don’t quote your font family properly.

    You cannot do font-family: Circular Std Black; but you can / should do font-family: "Circular Std Black";

    I opened an issue with the PHP Minify library author for when there are no quotes, but you should quote your font names, as not having them is a violation.
    https://github.com/matthiasmullie/minify/issues/316

    More on css font names and quotes:
    https://stylelint.io/user-guide/rules/font-family-name-quotes

    I’ll update the plugin once the fix comes out.

    Thread Starter TheRealMikeD

    (@therealmiked)

    You are absolutely correct. Enclosing font names in quotes is a best practice, and I am embarrassed that I missed that. It’s probably because I often write CSS through Chrome Dev Tools (connected to the files on my filesystem), and I don’t think it is adding the quotes automatically.

    Thanks so much for looking into it so quickly!

    Plugin Author Raul P.

    (@alignak)

    Nobody writes perfect code, it happens to me too.
    Either way, I think PHP Minify needs to sort it out, because for example, Arial Black is a system font and should not require quotes.

    But meanwhile, the only option is to quote it.
    You can check the changelog in the future, for an update on PHP Minify.
    If I have some time later, I’ll send them a patch as well.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘FVM Munging Font Names’ is closed to new replies.