Forum Discussion

RosMcNamee-4c99's avatar
RosMcNamee-4c99
Community Member
4 years ago
Solved

Rise Details section Font broken

Hi community/devs,

 

I've noticed that any new course I make in Rise, the Details section defaults its font back to a Serif font like Times New Roman or something. No matter what font I use, if I view the course on iOS the Details section switches font. This is only happening to new courses, so any course I update from now it will happen. This is a major bug and we need a fix implemented ASAP. 

I've shared a Review link here of this issue: https://360.articulate.com/review/content/ce7766d0-a207-4912-a970-b3a0f624823e/review

 

  • Hey everyone! I'm happy to let you know that we've fixed the issue where the wrong font was showing on your mobile devices. Please export your courses again to take advantage of the fix.

29 Replies

Replies have been turned off for this discussion
  • HenrikLarsson's avatar
    HenrikLarsson
    Community Member

    This problem is still unsolved. In mobile view, the font is changed to a serif font. Please, can dev. get back on status on this issue.

    Regards, 

    Henrik

    • RosMcNamee-4c99's avatar
      RosMcNamee-4c99
      Community Member
      Henrik Larsson

      This problem is still unsolved. In mobile view, the font is changed to a serif font. Please, can dev. get back on status on this issue.

      Regards, 

      Henrik

      It is unfortunate that this issue is still plaguing every Rise course. This is a very simple fix from a coding perspective. The dynamic resolution is altering the font as the screen hits its breakpoints. I'm unconvinced they are actually actively trying to fix this as the fix should be fairly straightforward. 

  • Is there an update on when this will be fixed? It's still unresolved as of this writing.

    • RosMcNamee-4c99's avatar
      RosMcNamee-4c99
      Community Member
      Polifinity Learning

      Is there an update on when this will be fixed? It's still unresolved as of this writing.

      There is no word from the support ticket I made. I just pinged them now in the ticket and so I'll respond here when I get a response from them.

  • I want to emphasize to the community and the devs, this issue was caused by an update last month. After the update this issue was present. It's a simple font bug that is caused by the screen being resized to a smaller breakpoint.

    To the devs: To fix this issue, take a look at the screen size breakpoint where the font switches. You're using a "font:inhert;" call to the body but after the breakpoint, it's restoring a default "Times New Roman" font instead of continuing its inheritance from the body font.

    I've done my best here to at least point the devs in the right direction and if there are any coding whizzes in this community, maybe you can identify a solution for the dev team.

  • So I'm tired of waiting for this dev team on this. I'm convinced they are just not doing anything about it. So I had the inspiration to fix this and I found the problem in their coding. TLDR: they are inheriting the Merriweather font in the container for the description. 

    For Instructional Designers who can't wait for the devs to implement the fix, here is the solution:

    • When you publish a course, extract the .zip file.
    • Navigate to scormcontent > lib > main.bundle.css
    • Open this file in Notepad, or wherever you want to edit the code.
    • Hit CTRL+F to open the Find window and type in: ".overview__description"
    • You'll notice after the bracket "{" a sentence: "font-family:merriweather,serif;"
    • Change this to "font-family:lato,sans-serif;"
    • Save the file
    • Navigate back to the root folder, select all the folders and files, Send to > Compressed .zip
    • Your course should work without randomly switching to Merriweather font when the screen gets too small, or on mobile. 

    For the devs: Look at the solution above and implement the fix inside of Rise so we don't have to do this massive workaround. 

    • RosMcNamee-4c99's avatar
      RosMcNamee-4c99
      Community Member

      Note: Change the font to the one you want it to be, "lato,sans-serif" is just the one we use.

  • This fix can also work with custom fonts. Tested it on a custom Helvetica font we use. Just make sure you're calling the font the same as named in the font list. Would be interested to see if there are any issues with other custom fonts.

  • I couldn't get this to work. changed Merriweather to Lato as instructed, but the font stayed the same.

  • Make sure it's "lato,sans-serif", and just switching the merriweather to lato, the sans-serif part is equally as important. The code segment should read: "font-family:lato,sans-serif;"

    If your code looks like this and you're still having issues, please attach the main.bundle.css file here and I can have a look.

  • Hey everyone! I'm happy to let you know that we've fixed the issue where the wrong font was showing on your mobile devices. Please export your courses again to take advantage of the fix.