Change in text font and missing characters in Google Chrome

When I open one of my storyline projects in Google Chrome the font text is changed and all of the letter "f"'s are shown as squares. 

The link to the project is here: https://lo.library.wisc.edu/copyright/story_html5.html

This was not like this yesterday. Has anyone else experienced this or knows why this is happening? This is an urgent issue since students are supposed to be using the tool Friday. 

11 Replies
Alexandra Stark

It is now working again in Chrome, not sure how for just one day that happened, but glad to see it's fixed now. In the other browsers the text is crisp and it's blurry in Chrome, but I saw on another discussion board that the articulate staff is working on a solution to this. Looking forward to that fix since Chrome is the recommended browser for the Canvas Learning Management System. 

Kristen Llobrera

Have there been any other complaints of this happening? I just had a course pop up with the exact same problem. I can't share the file, file here, but here's a screenshot. The font has changed to a sans serif and all the Ts and Fs are now squares. I'm assuming this is related to the missing Ts and Fs I've experienced before in IE, but this time it's in Chrome.

Matt Garton

We are seeing this in FF and Chrome on multiple PCs running W10 and W7.

It's related to this we jsut started:
https://community.articulate.com/discussions/articulate-storyline/open-sans-font-no-displaying-well-in-mozilla-firefox-and-chrome-storyline-360

When it was 1 language per file...all languages were fine.
When we merged, latin text became a problem (letter 'f' goes missing and text is in a serif font, not Open Sans) in FF and Chrome only. IE was fine. These are HTML5 outputs. Client does not want Flash.

Edit: also Safari was fine. IE and Safari can display multi-language course fine, but Chrome and FF are replacing with Times and there are missing letters.

Ashley Terwilliger

Hi Amy, 

Option 1 outlined in this article would apply to Chrome as well: 

  1. Add a MIME Type to Your Hosting Server

If learners see the wrong fonts in all web browsers (Chrome, Firefox, Internet Explorer, etc.), it means the server where your course is hosted doesn’t know how to display web fonts.

It’s easy to fix. Ask your server admin to add a MIME type to the hosting server for Web Open Font Format (WOFF) files. For example, here’s how to add a MIME type in Microsoft’s IIS Manager.

If that's still not working on your end, can you share more details about your Chrome version and how the fonts are displaying? That'll shed some additional light on the issue and we'll be able to point you in the right direction!