Feature Request/ WebFonts

[xithisMember Karma: 122 pts@xithis]

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});
});

This post has received 1 vote up.

[xithisMember Karma: 122 pts@xithis]

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});
};

[Author]

Posts