Originally there was only a limited set of fonts available to website builders. Even now, the fonts readily available in a web browser differ per platform. Even those that do not aim at advanced typography want to have some control over their fonts, for both 'titles' and 'content'
CSS font stack
To overcome the problem of differences in available fonts in various web browsers, css allows a web designer to define a 'stack' of multiple font-families. The browser simply use the first font that is available. The downsides of course are: 1) still a limited set of fonts available, and 2) your page will look different in every browser, especially when using less supported fonts.
Text as image
For titles (ie non-changing pieces of text), one can present text as an image. These images are created upfront in an image editor. This allows you to use every font you can find. Even nowadays this is still often done for titles and such, but has 2 downsides: 1) Google only indexes text, 2) inflexible: for every change in text or font you have to go back to your image editor.
Custom fonts
Nowadays, it is also possible to add custom fonts to your website. This functionality is available in 'most browsers'. This may sound discouraging, but as a web designer, this is often the best you'll get anyway and because of font stacking (see above), it is really easy to present a very practical alternative.
Options
For those who want to do stuff manually, I gladly refer to this post. As often, there's workarounds needed to increase the spread of browsers that will understand you. In such cases, it is nice to make use of frameworks that do this for you.
Google font API
Google font API is such a framework. It is accompanied by a set of freely available font directory. All you have to do is include a css file from Google's server, and you can use the font in your css font definitions as any other font:
<link href="http://fonts.googleapis.com/css?family=Font+Name" rel="stylesheet" type="text/css">
You can define multiple font families (ie 'fonts'), as well as font styles (such as regular, bold, italic, bold-italic).
Blogger fonts
Let's look at Blogger, then Wordpress.com. Blogger enables you to change HTML and CSS, so you are free to go. I realized along the way, though, that Blogger makes it even easier! In the template editor, under 'advanced' you can not only select 'commonly' used web fonts such as Arial and Georgia, but also all (?) available free fonts from the Google font directory. Awsome!
Wordpress and TypeKit
Here we go. Wordpress.com. Here I even needed it more, because I haven't found a way to increase my font size without paying for custom css. TypeKit is really well integrated into Wordpress. The tool itself is quite nice, but due the the degrees of freedom it wants to offer you, quite complex. If you want to stick to 'free', you are limited to 2 fonts and 1 website. For me it was enough to test things.
You have to subscribe to TypeKit, and enter your TypeKit id in your Wordpress dashboard. Then you can use the TypeKit website to select a font and css tags the font should be attached to (if you are lucky, and the template you chose is already in the list, TypeKit does a lot of the work for you). If you publish and wait (they say it may take a few minutes), you should see the changes applied to your blog.
So, although you are limited when keeping it free, it is possible to use TypeKit to change fonts to non-web fonts in Wordpress. In practice however, I found this quite tedious, and previewing is not an option, due to the delay after pressing the publishing button.
Closing remarks
So all together, you can add 'custom' fonts to your webpage, or blog. In Blogger it is super easy, in free Wordpress.com unpractical but doable using TypeKit. Google font API is your friend if you have your own website. Realize however that a full font, including different styles and with extended character sets can become quite big files. Adding 4 fonts to your page can really add up. So be selective in which styles, characters and fonts you really need.
Geen opmerkingen:
Een reactie posten