Google webfonts can be easily used in o-blog in 2 different ways: using the Google API, or by providing resources in the templates/style directory.

Caution

Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.

Both examples below use the Yanone Kaffeesatz font.

Using Google API

The quick use provides an import snippet such as:

@import url("http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700&subset=latin,latin-ext");

That line should be included into the templates/style/less/o-blog-default.less file in which you should also add something like:

h1, h2, h3, h4, h5, h6 {
    font-family: "Yanone Kaffeesatz", sans-serif;
}

And that's it.

Providing resources

That is less efficient in terms of network resources but provides a good alternative for offline publications.

The script get-font does all needed jobs.

You can run:

./get-font 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700&subset=latin,latin-ext'

And add the font declaration in templates/style/less/o-blog-default.less:

@import "font-Yanone-Kaffeesatz.less";

Finally, declare its use as in the Google API version:

h1, h2, h3, h4, h5, h6 {
    font-family: "Yanone Kaffeesatz", sans-serif;
}
blog comments powered by Disqus