Google WebFonts API provides us with hundreds of open source fonts we can use in our web page. We can easily search through the web fonts collection and select the ones we want to use.
The following code sample shows how simple it is to use these fonts in our web page by adding a code snippet in JavaScript that dynamically loads the fonts we picked.
<html>
<head>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Magra::latin', 'Titan+One::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<style>
body {
font-family: 'Titan One';
font-size: 52px;
}
</style>
</head>
<body>
<div>We Love Programming</div>
</body>
</html>
The following code sample shows how simple it is to add the fonts we picked by adding a @import statement into our CSS.
<html>
<head>
<style>
@import url(http://fonts.googleapis.com/css?family=Magra|Titan+One);
body {
font-family: 'Titan One';
font-size: 52px;
}
</style>
</head>
<body>
<div>We Love Programming</div>
</body>
</html>
The following code sample shows how simple it is to add the fonts we picked by adding a CSS link to our web page.
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Magra|Titan+One' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Titan One';
font-size: 52px;
}
</style>
</head>
<body>
<div>We Love Programming</div>
</body>
</html>
The following video clip overviews the above mentioned three techniques for adding fonts into our web page and explains each and every one of them.
You can find more resources for learning how to use Google WebFonts API in my free courses website at http://abelski.lifemichael.com.
