Hi all, we have a project in Rise, and althougth we selected a font that supports Turkish for the content we have problems with the labels. They are not displaying well. What is even weirder is that the same characther (ş)that is not supported in the labels it is supported in the content. Any advise on this?
Hi Alyssa, thank you for getting back to me. Yes, we have tryied with several fonts that we know support Turkish, we tested them by pasting a Turkish sentence in the Google fonts web page. Even Open Sans and Roboto fonts support it. We are using Helvetica World for the main content, and everything looks good except for the text on the labels. What we think, is that when we change the font in the Theme, that change is not affecting the labels. Unfortunately we were not able to find a different place to change the font for the labels in Rise.
Thanks, Selene. I chatted with our Rise team this AM to confirm that custom fonts aren't applied to the label sets or headers of your lessons. The text in those areas is using a preset font based on some fixed size fields that Rise is using.
I'll let the team know that you're hoping to have a custom font for labels that would allow for special characters in other languages. We'll keep you posted if this feature is added to Rise!
We were also dealing with this very problem for a few days. Importing a font that supports Turkish characters seems to resolve the issue for the content, but not for the UI elements like buttons. Because the main font used by Articulate is Lato, and Lato does not have chars for letters like Ş, Ğ etc.
After trying to edit CSS over two iframe panels with JavaScript on the host site, and attempting several other potential solutions, the final approach was easy but messy. Once you extract the SCORM file exported by Articulate, you'll find index.html at scormcontent folder. In this file, there is a <style> tag just after <body>. At line 33 (this may change in the future), I added the following CSS class:
Raleway TR is a custom font uploaded by us and exists in SCORM package. The problem is at line 32, Lato is assigned as the font for all elements that have "brand--ui" class and it's marked !important. On top of that, this expression is executed twice, probably because the same expression is rendered again while the SCORM package loads at the browser. The solution was to be more explicit than other expressions given by default. That is why I used #innerApp at the beginning of identifier, and this solved the issue. After this, I zipped the contents of the SCORM file again and uploaded it to our host site.
So the steps are:
1) Extract the SCORM file and open "index.html" at "scormcontent" folder.
2) Add the CSS line given above to line 33, or anywhere in the <style> tag at the start of <body>. Edit the font-family value to the font you uploaded earlier to Articulate. Save file and close.
3) Zip the contents of SCORM package and upload it to your site.
What I think is either the Articulate team should pick a default font other than Lato that also supports non-English characters, or let the user change the font for the UI too.
8 Replies
Hi Selene!
It sounds like you already followed these steps to select a custom font that supports Turkish, is that right? What custom font did you upload to Rise?
Hi Alyssa, thank you for getting back to me. Yes, we have tryied with several fonts that we know support Turkish, we tested them by pasting a Turkish sentence in the Google fonts web page. Even Open Sans and Roboto fonts support it. We are using Helvetica World for the main content, and everything looks good except for the text on the labels. What we think, is that when we change the font in the Theme, that change is not affecting the labels. Unfortunately we were not able to find a different place to change the font for the labels in Rise.
Hi Selene,
Is it only that one character, or are there others that misbehave on the labels?
When you entered the text in on the labels did you upload the XLIFF or attempt to copy/paste or key in the characters directly into the editor?
Hi Ashley,
The labels were uploaded through XLIFF. I have also tried by copy/pasting that word into notepad and pasting it back. Did not work.
There are more characters, see screenshot below. This is only happening in the text that comes from the labels.
Thanks, Selene. I chatted with our Rise team this AM to confirm that custom fonts aren't applied to the label sets or headers of your lessons. The text in those areas is using a preset font based on some fixed size fields that Rise is using.
I'll let the team know that you're hoping to have a custom font for labels that would allow for special characters in other languages. We'll keep you posted if this feature is added to Rise!
Hi Ashley, is there any update on this?
Thanks for checking in, Arith. We're still tracking this request. Thanks for letting us know you need this feature!
We were also dealing with this very problem for a few days. Importing a font that supports Turkish characters seems to resolve the issue for the content, but not for the UI elements like buttons. Because the main font used by Articulate is Lato, and Lato does not have chars for letters like Ş, Ğ etc.
After trying to edit CSS over two iframe panels with JavaScript on the host site, and attempting several other potential solutions, the final approach was easy but messy. Once you extract the SCORM file exported by Articulate, you'll find index.html at scormcontent folder. In this file, there is a <style> tag just after <body>. At line 33 (this may change in the future), I added the following CSS class:
#innerApp .brand--ui, #innerApp .brand--ui * {font-family: 'Raleway TR' !important;}Raleway TR is a custom font uploaded by us and exists in SCORM package. The problem is at line 32, Lato is assigned as the font for all elements that have "brand--ui" class and it's marked !important. On top of that, this expression is executed twice, probably because the same expression is rendered again while the SCORM package loads at the browser. The solution was to be more explicit than other expressions given by default. That is why I used #innerApp at the beginning of identifier, and this solved the issue. After this, I zipped the contents of the SCORM file again and uploaded it to our host site.
So the steps are:
1) Extract the SCORM file and open "index.html" at "scormcontent" folder.
2) Add the CSS line given above to line 33, or anywhere in the <style> tag at the start of <body>. Edit the font-family value to the font you uploaded earlier to Articulate. Save file and close.
3) Zip the contents of SCORM package and upload it to your site.
What I think is either the Articulate team should pick a default font other than Lato that also supports non-English characters, or let the user change the font for the UI too.