Skip to main content
L
Leif5FDE
Participating Frequently
July 29, 2025
Question

Google fonts display with unpredictable style

  • July 29, 2025
  • 1 reply
  • 291 views

I have dynamic text instances arranged on the stage of my html5 canvas document.  Some of them are headings, so they are displayed in bold style.  Each is followed (below it) by one or more separate dynamic text instances that contain a paragraph in regular style.  This is all rather trivial, and displays perfectly when using Verdana system font, but after I switched to Google fonts I am getting unpredictable styling: Now, some of the heading instances display in regular style, despite being indicated in Properties as Open Sans Bold.  And some of instances intended as regular paragraph text display in bold, depsite being given the Properties of Open Sans Regular.

 

Under the assumption that the affected text instances somehow had gotten "corrupted", I tried duplicating instances that displayed correctly, and replacing the text.  This worked only up to a point - suddenly after I had fixed most of the problem instances, some of them reverted back to displaying in the wrong style again.

 

It seems like random bugginess, but hopefully there is something I am missing that can explain (and fix) this issue?

      1 reply

      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      July 29, 2025

      the fonts are loaded (or not) at run time.  ie, that suggests "preloading" the fonts might solve your problem.

      L
      Leif5FDEAuthor
      Participating Frequently
      July 29, 2025

      Thanks for your help grappling with this.  My understanding has been that Animate automatically adds code to pre-load the fonts.  Looking through the .html file that was generated, it does have font-related functions, e.g. LoadGFonts, and isFontAvailable.  It also has this statement: var gFontsFamilies = ["Open Sans"];

      I don't have the ability and time to try deciphering/debugging that code, but I presume it performs the preloading.

      Also, the display problem is a "mixing up" of the styles, not the absence of any style.  My feeling is that the fonts do load, but it is somehow "losing track" of which text instance goes with which style.

      I did also try using an Adobe web font (Source Sans Pro), and I got the same problem.  So it seems to be a problem with web fonts in general.

       

      My knowledge of CSS is very basic.  But I suppose in principle, I should be able to name every text instance, and then add some CSS styling code after everything else, to ensure the instances all "switch back" to their desired style.  But, that would be very labor-intensive.  

       

      I will test my page on Windows today - maybe I will decide to just stick with system fonts.  It's disappointing that web fonts are such a dud for me.  I could not find anything about this problem on the internet.

      L
      Leif5FDEAuthor
      Participating Frequently
      July 30, 2025

      Maybe my standards are not the highest, but I tested a version of my html5 canvas page that uses system fonts, and it looks great on Mac, Win, Android, Firefox, Chrome, Edge.  (Will test with iPad soon.). I don't really understand what is so bad about using system fonts.  Maybe it becomes more of an issue if you are a font connoisseur with really unique fonts, but that's not my use case.  Just my two bits from this experience!

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices