Register for our next webinar, 5 Keys to Unlock Storytelling in Your eLearning, where you'll learn how to unlock the magic of storytelling in your eLearning development to increase learner engagement and retention! Join Andrew Townsend, our Campaign Marketing Manager, on Thursday, December 3, 2020 at 11:00 AM MDT.

Be The First On Your Block to Rock Lectora® 21!


Apply for exclusive early access to the latest version of Lectora® Desktop v21. Seating is limited so apply now!

In need of help with your eLearning? Feel free to ask a question of the community! You can also visit our Knowledge Base or, if you're in need of immediate assistance, submit a case to our Customer Success team.

Feature Request/ WebFonts

xithisxithis Community Member Posts: 66
After wrangling some jquery to embed webfonts throughout my course, I thought "this would be a great feature!"

In the styling it would be great if we could define webfonts to use.  For example, link it to google fonts for the beginning and then go from there.

This way I don't have to try and use different fonts in Lectora Online just so I can change the weight in the same family.

Example code edited for anyone trying to do the same thing:
//Originally by http://www.intea.lv
//modified

$(document).ready(function() {
$.extend($.expr[':'], {
Roboto: function(elem){
var $e = $(elem);
return( $e.css('font-family') !== "'book antiqua', serif" );
},
});
$('span:Roboto').css('font-family', 'Roboto');
});
$(document).ready(function() {
$.extend($.expr[':'], {
Light: function(elem){
var $e = $(elem);

return( $e.css('font-family') == "'book antiqua', serif" );
},
});
$('span:Light').css({'font-family': 'Roboto', 'font-weight':100});
});

Comments

  • xithisxithis Community Member Posts: 66
    To get it working with the new Lectora Online 3.  Use this instead and call the js function with an OnShow javascript call:

    function replaceFonts() {
    $.extend($.expr[':'], {
    Arial: function(elem){
    var $e = $(elem);
    return( $e.css('font-family') !== "'book antiqua', serif");
    },
    });
    $('span:Arial').css('font-family', 'Roboto');
    };
    function replaceFonts2() {
    $.extend($.expr[':'], {
    Light: function(elem){
    var $e = $(elem);
    return( $e.css('font-family') == "'book antiqua', serif" );
    },
    });
    $('span:Light').css({'font-family': 'Roboto', 'font-weight':100});
    };
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!

Be The First On Your Block to Rock Lectora® 21!


Apply for exclusive early access to the latest version of Lectora® Desktop v21. Seating is limited so apply now!