Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Glyph bbox was incorrect in the Firefox dev console #19925

Closed
2 tasks done
tchapeaux opened this issue Oct 2, 2023 · 29 comments
Closed
2 tasks done

Bug: Glyph bbox was incorrect in the Firefox dev console #19925

tchapeaux opened this issue Oct 2, 2023 · 29 comments
Assignees

Comments

@tchapeaux
Copy link

tchapeaux commented Oct 2, 2023

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

image

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
@tchapeaux tchapeaux added bug needs-triage This bug needs to be confirmed labels Oct 2, 2023
@ve3
Copy link

ve3 commented Oct 3, 2023

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

@sensibleworld
Copy link
Member

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
Copy link

TheJaredWilcurt commented Oct 4, 2023

@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
Copy link
Member

tagliala commented Oct 5, 2023

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

@Zahen
Copy link

Zahen commented Oct 5, 2023

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
Copy link

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

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
Copy link

epugh commented Oct 16, 2023

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

@tagliala tagliala removed the needs-triage This bug needs to be confirmed label Oct 16, 2023
@baguaboy758
Copy link

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

@hexkey
Copy link

hexkey commented Nov 2, 2023

Bump :)

@Lemmings19
Copy link

+1

@gustavocardoso
Copy link

Bump!!!

@melroy89
Copy link

This is a feature not a bug 🐛 .

@mlwilkerson
Copy link
Member

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
Copy link

hexkey commented Nov 19, 2023

Awesome, thank you.

@RolandMarchand
Copy link

Wonderful, greatly appreciated.

@akimd
Copy link

akimd commented Nov 23, 2023

Great news.

@ingodwetryst
Copy link

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
Copy link

cadeyrn commented Jan 9, 2024

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

Yes, it's fixed in Font Awesome 6.5.

@winternet-studio
Copy link

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

@joshmckibbin
Copy link

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
Copy link

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
Copy link

N6REJ commented Jul 19, 2024

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
Copy link

riedde commented Jul 19, 2024

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
Copy link

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
Copy link
Member

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
Copy link

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
Copy link
Member

tagliala commented Jul 25, 2024

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
Copy link
Member

mlwilkerson commented Jul 26, 2024

@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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests