Forum Discussion

AprilDrennan-a3's avatar
AprilDrennan-a3
Community Member
5 years ago

change default font on Notes section?

Hi. Is there a way to change the default font for the Notes tab of the player? If so, how. Thanks in advance!
storyline 360
odell's avatar
odell
Community Member
5 years ago

You can try accomplishing this by overriding the font in CSS.

Option 1 - Modify published output, look for a file named output.min.css and add css like this, modifying font and other properties as you wish:

.note-title {
 font-family: 'Helvetica' !important;
 font-size: large !important;
}
.note-content p span {
 font-family: 'Helvetica' !important;
 font-size: small !important;
}

Option 2 -  Execute this javascript in your project somewhere (e.g., first slide), it will inject the style into the page when run. Perhaps easier to maintain than option 1.

var style = document.createElement('style');
style.textContent = `
 .note-title {
   font-family: 'Helvetica' !important;
   font-size: large !important;
 }
 .note-content p span {
   font-family: 'Helvetica' !important;
   font-size: small !important;
 }
`;
document.head.appendChild(style);

Notes:

  • If Articulate changes their html / class names output in the future, you'll need to examine the html and update the css above accordingly.
  • Above was tested for the 'classic' player, the class names might be different for the 'modern' player.
  • If you need to find the class names you can do so by
    • viewing the course in chrome/firefox/etc
    • opening the notes & right clicking the notes content in chrome/firefox/etc
    • selecting 'inspect element' -- basic html/css knowledge required
Related Content