I thought it worthwhile to capture the essence of using fonts and also I wanted to see if I could use Google fonts in this blog.
Using Google fonts boils down to three things actually:
- load the font from Google by supplying a link in the <head> section of your HTML document
<link href="https://fonts.googleapis.com/css?family=Amarante" rel="stylesheet">
- defining a corresponding style e.g. a class style with a name
<style> .coolFont { font-family: Amarante } </style> - applying this font to any element with
< ... class="coolFont" ... >
Here is a Javascript code snippet (which I actually included in the HTML text) which dynamically loads three fonts and defines three correponding styles. It applies each of the styles to an h1 element.
<script>
var fonts = [ 'Acme', 'Amarante', 'Audiowide' ]
for( i=0; i<fonts.length; i++ ) {
var style = document.createElement( 'STYLE' );
// Define class style '.font0', '.font1' etc.
style.innerHTML = ".font" + i + "{ font-family: " + fonts[i] + ";}"
document.getElementsByTagName('head')[0].appendChild( style );
var link = document.createElement( 'LINK' );
link.setAttribute( 'href', 'https://fonts.googleapis.com/css?family=' + encodeURI( fonts[i] ) );
link.setAttribute( 'rel', "stylesheet" ) ;
document.getElementsByTagName('head')[0].appendChild( link );
}
</script>
<h1 class="font0">Cool font, dude! </h1>
<h1 class="font1">Cool font, dude! </h1>
<h1 class="font2">Cool font, dude! </h1>
This will create a links like this
<link href="https://fonts.googleapis.com/css?family=Amarante" rel="stylesheet">and styles
.font1 {
font-family: Amarante;
}
and here is the result
No comments:
Post a Comment