Hi All, Super JQuery n00b here,
I am wanting to embed a font into my jquery (which eventually I will develop into a browser plug-in) which will change the font family for the entire website before loading.. .
Is there a good cross-browser happy way to do this?
My code is here
- <!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script TYPE="text/javascript">
var global_names = [
"Jessica", "Heather", "Jasmin", "Tiffany", "Rachel"
]
function replace_avatar() {
var rand = Math.floor(Math.random() * global_names.length);
var avatar_name = global_names[rand];
// $("span.name-only").text(global_names[rand])
var full_name = 'FULL NAME';
var user_name = avatar_name;
var image_link_url = 'img/'+ avatar_name +'.png';
var image_url = 'img/'+ avatar_name +'.png';
var new_avatar = ' \
<a href="'+ image_link_url +'" itemprop="image"><img height="210" src="'+ image_url +'" width="210" /></a> \
<h1> \
<span itemprop="name">'+ full_name +'</span> \
<em itemprop="additionalName">'+ user_name +'</em> \
</h1> \
';
$("div.avatared").html(new_avatar);
}
$(document).ready(function() {
replace_avatar();
$("body").css({"background-color" : "rgba(255,192,203,1)"});
$("p").css({'color': '#00ff00 '});
$("h3").css({'color': '#00ffff '});
});
</script>
</head>
<body>
<p>test text for body font/color here</p>
<h3>test test for header here</h3>
<div class="avatared">
This needs to be replaced!
</div>
</body>
</html>