Thursday, February 14, 2019

A list of Google fonts

Here is a list of Google fonts. It is constructed with Javascript and CSS and dynamically embedded into this blog.

Some fonts can be made more effective in bigger sizes or by applying font effects but that would be too much for this overview.
Enjoy and find your font.

Monday, February 11, 2019

How to use Google fonts (even in this blog)

Google provides a huge list of fonts and it describes how to use them in detail, in particular applying font effects and more.

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