Bug: Glyph bbox was incorrect in the Firefox dev console

[tchapeaux]

Bug description

When using FontAwesome v6 with Firefox (118), I'm seeing many warnings about FontAwesome glyphs in the console.

For example:

downloadable font: Glyph bbox was incorrect (glyph ids 5 9 10 12 13 15 16 33 49 59 60 61 72 76 81 83 84 85 88 91 92 97 101 102 103 104 106 107 109 118 120 121 122 124 134 135 136 137 139 141 143 145 146) (font-family: "Font Awesome 6 Pro" style:normal weight:300 stretch:100 src index:0) source: https://ka-p.fontawesome.com/releases/v6.4.2/webfonts/pro-fa-light-300-18.woff2

According to this ticket in Firefox's bug tracker, this is not an issue with Firefox, but an actual bug in FontAwesome font definition.

Reproducible test case

https://codepen.io/Thomas-Chapeaux/pen/gOZdpMV

Screenshots

Font Awesome version

v6.4.2

Serving

Kit

Implementation

CSS

Browser and Operating System

• Firefox Developer Edition (119.0b3)
• Firefox (v118)

Web bug report checklist

• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[ve3]

Confirm bug happens on Firefox (tested with 118.0.1) but not on Chrome (tested with 117.0.59.xxx).

[sensibleworld]

Thanks, folks. We've heard this report from a few folks. ​It looks like the Firefox team introduced a new tolerance check in their recent build. There are some glyphs that extend slightly beyond the bbox area (this is related to how curves are sometimes drawn differently between OTFs, TTFs, WOFFs, SVGs, etc). The good news is that there should be no issue with the icons from a visual standpoint (the cropping is so minute, that it's imperceptible for the most part).
​
​We're going to work on a fix on our end, but there should be no issue with continuing to use the typeface... it'll continue to display as normal.
​

[TheJaredWilcurt]

@sensibleworld This is also occurring in v4.

Can we get a fix there too and a bump to 4.7.1 for the npm package? npm's stats show over 2 million downloads of 4.7.0 in the past 7 days.

[tagliala]

v4 is in EOL and that npm package is not official. You can try to get in touch with the author

[Zahen]

Same warning with :

• Firefox Dev v119.0b5 (64 bits)
• @fortawesome/fontawesome-free v6.3.0
• mdb-angular-ui-kit v4.10
• Angular v15.2.4

[TheJaredWilcurt]

Unfortunately the GitHub repo that published the npm package does not have an issues page to report this.

• https://github.com/juliankrispel/Font-Awesome

Unless @juliankrispel sees this and is willing to modify the font files and do a new release, I'm guessing those contributing to the 2 million+ downloads a week will need to either live with the warning, or switch to something else that is maintained.

[epugh]

I use https://github.com/FortAwesome/font-awesome-sass and am seeing the same issue.

[baguaboy758]

Same with font awesome pro 6 (latest) and subsetter compiles

[hexkey]

Bump :)

[Lemmings19]

+1

[gustavocardoso]

Bump!!!

[melroy89]

This is a feature not a bug 🐛 .

[mlwilkerson]

The fix has been completed and will appear in a forthcoming release of Font Awesome. The fix will be present in the official fonts for that forthcoming release, as well as fonts built when downloading or subsetting kits from fontawesome.com.

[hexkey]

Awesome, thank you.

[RolandMarchand]

Wonderful, greatly appreciated.

[akimd]

Great news.

[ingodwetryst]

The fix has been completed and will appear in a forthcoming release of Font Awesome. The fix will be present in the official fonts for that forthcoming release, as well as fonts built when downloading or subsetting kits from fontawesome.com.

Has that happened yet? If not, do we have an ETA? Thanks!

[cadeyrn]

Has that happened yet? If not, do we have an ETA? Thanks!

Yes, it's fixed in Font Awesome 6.5.

[winternet-studio]

What about fixing this in version 5 which is an LTS that should still receive patch releases?

[joshmckibbin]

What about fixing this in version 5 which is an LTS that should still receive patch releases?

Not sure this qualifies as a "critical bug fix", at least not yet.

[AnrDaemon]

What about fixing this in version 5 which is an LTS that should still receive patch releases?

Not sure this qualifies as a "critical bug fix", at least not yet.

Even if not critical, seeing this message a hundred times a day is annoying and distracts developer's attention from actually important notifications.

[N6REJ]

I still get this error

downloadable font: Glyph bbox was incorrect (glyph ids 2 3 4 5 8 9 10 11 12 14 17 19 21 22 32 34 35 39 40 43 44 45 46 47 49 50 54 55 61 62 64 66 68 69 70 83 95 104 105 119 122 134 143 144 148 158 166 176 186 189 198 208) (font-family: "Font Awesome 6 Free" style:normal weight:400 stretch:100 src index:0) source: http://localhost/1fd5bfc5c72323f1d019208088a6de21//libs/fontawesome/webfonts/fa-regular-400.woff2 

[riedde]

I still get this error

downloadable font: Glyph bbox was incorrect (glyph ids 2 3 4 5 8 9 10 11 12 14 17 19 21 22 32 34 35 39 40 43 44 45 46 47 49 50 54 55 61 62 64 66 68 69 70 83 95 104 105 119 122 134 143 144 148 158 166 176 186 189 198 208) (font-family: "Font Awesome 6 Free" style:normal weight:400 stretch:100 src index:0) source: http://localhost/1fd5bfc5c72323f1d019208088a6de21//libs/fontawesome/webfonts/fa-regular-400.woff2 

I also got this error until I defined the font-weight explicitly in the css:
font-family: "Font Awesome 6 Free"; font-weight: 900;

[deividfirewall]

Tengo el mismo problema, con laravel 11, inertiaJS, mozilla firefox developer, pero solo es cuando ocupo la debugbar de laravel, siempre me aparece esto:
downloadable font: Glyph bbox was incorrect (glyph ids 33 55 62 81 82 83 84 87 88 89 90 112 119 120 123 139 159 162 164 166 178 184 185 217 218 272 273 274 275 279 281 284 290 291 292 309 310 319 321 323 326 329 330 331 332 333 334 339 341 347 349 351 352 353 354 357 358 361 366 367 370 371 414 431 436 444 445 458 460 464 465 483 505 508 511 514 516 517 518 520 521 538 539 546 568 574 579 580 585 586 594 596 599 602 603 616 618 622 627 629 630 633 634 638 643 645 651 654 665 675 685 686 688 691) (font-family: "PhpDebugbarFontAwesome" style:normal weight:400 stretch:100 src index:0) source: data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAX7oAA0AAAAChqwABAAHAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABwAAAAc … Tmveac2rY2tJx9bSjOad0bwzmldH2JKOsKUZzTujeWc074zmndG8M5p3RvPOaN5ZzTureWc176zmndW8s5p3VvPOilMmNemsJp3VpLOadFaTzmrS2dn/AboJB4wAAAA=

[mlwilkerson]

Could you say what version of Font Awesome is being loaded in these cases where you still see the warnings?

If you're seeing this again in Font Awesome 6.5 or newer, then there's been some other change, or a regression that I'd want to investigate.

If you're still seeing the warnings on Font Awesome 6.4.2 or earlier, then that's to be expected.

Here's a CodePen that loads FA 6.5.0. In Firefox, I don't see the glyph box warnings for this one. Expected.

Here's a CodePen that loads FA 6.4.2. In Firefox, I do see the glyph box warnings. Expected.

[deividfirewall]

Could you say what version of Font Awesome is being loaded in these cases where you still see the warnings?

If you're seeing this again in Font Awesome 6.5 or newer, then there's been some other change, or a regression that I'd want to investigate.

If you're still seeing the warnings on Font Awesome 6.4.2 or earlier, then that's to be expected.

Here's a CodePen that loads FA 6.5.0. In Firefox, I don't see the glyph box warnings for this one. Expected.

Here's a CodePen that loads FA 6.4.2. In Firefox, I do see the glyph box warnings. Expected.

my package.json information:
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-regular-svg-icons": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/vue-fontawesome": "^3.0.6",
}
I use the follow stack: Laravel 11, Inertia JS, Vue3, Tailwind, and the error appear only when set APP_DEBUG=true in the .env file, this setting show the debugbar for laravel package

[tagliala]

what is PhpDebugbarFontAwesome ?

With a search on GitHub, I suppose this is a third-party component: https://github.com/search?q=PhpDebugbarFontAwesome&type=code which is vendoring Font Awesome as a base 64 encoded file

https://github.com/maximebf/php-debugbar/blob/055740c7c9c9f960785d597da487682858d6b998/src/DebugBar/Resources/vendor/font-awesome/css/font-awesome.min.css

I guess that this component should be updated too

[mlwilkerson]

@deividfirewall your package.json declares dependencies on NPM packages to support an SVG/JS usage of Font Awesome. But the glyph bbox warnings you're seeing pertain to a Webfont/CSS usage.

Therefore, those glyph bbox warnings have nothing to do with your package.json configuration. The warnings have to do with webfonts, but your package.json involves only SVGs, no webfonts.

What @tagliala shows is a common scenario in environments like this. There may be multiple components in the system using Font Awesome in various ways. Sometimes these conflict or produce unexpected behaviors.

I created another CodePen using FA 4.7.0 Webfont/CSS, and it does show the glyph bbox warnings in Firefox as well. So it's very likely that PhpDebugbarFontAwesome is what would need to be updated to eliminate the noise. It would need to be updated to use a version of Font Awesome Free Webfont/CSS that's at version 6.5.0 or newer.

[deividfirewall]

Deividfirewall tu package.jsondeclara dependencias de los paquetes NPM para apoyar un uso de SVG/JS de Font Awesome. Pero las advertencias de gliph bbox que estás viendo pertenecen a un uso de Webfont/CSS.

Por lo tanto, esas advertencias de gliph bbox no tienen nada que ver con su package.jsonconfiguración. Las advertencias tienen que ver con los webfonts, pero su package.jsoninvolucra sólo SVGs, sin webfonts.

Lo que muestra Etagliala es un escenario común en entornos como este. Puede haber múltiples componentes en el sistema usando Font Awesome de varias maneras. A veces estos conflictos o producen comportamientos inesperados.

Creé otro CodePen usando FA 4.7.0 Webfont/CSS, y también muestra las advertencias de gliph bbox en Firefox. Así que es muy probable que PhpDebugbarFontAwesomees lo que habría que actualizar para eliminar el ruido. Tendría que actualizarse para utilizar una versión de Font Awesome Free Webfont/CSS que está en la versión 6.5.0 o más reciente.

You're right, I tried to solve my problem with Tagliala's solution, however I didn't find the code in my project, maybe it's because php-debugbar consults its API directly, anyway I appreciate the support and that they clarified to me that the problem is not in my project.