Google Font Api

Tweet

Following other recent posts about using non-standard fonts, I would like to show how Google Font Api is working.
Following the examples in the related page, we can create text with a custom font. In reality there's a quite wide selection of available fonts, however it is limited. If you think it is too limited, then search the blog for other solutions.


The basic function of Google Web Fonts is linking to the Google Api. Put the following code in the <head> of your document:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
   h1 {
        font-family: 'Tangerine', serif;
        font-size: 48px;
        }
</style>

What The Font: how to detect font used in an image

Tweet

Have you ever needed to understand what was the font used in a logo, picture, image? Customers some times have no clue and if you need to redisign a company logo, you might end up trying to find out what was the font used. Today there's an efficient way of discovering the font: WhatTheFont.
I discovered the web service some months ago, when I needed to make a logo clearer and all I had was a lousy jpg. Working on the original image was a pain, so I decided to make it from scratch. Problem? Well, I asked what was the font used. The answer was a lapidary "Don't know what a font is!". WhatTheFont provided a fast solution and found the font.

The site is very easy to use. You can upload an image or link directly to the image source. The software will then ask you to confirm the recognition of every single letter found. And after that, it will provide possible solution based on the information gathered. Just try and see the result.

CSS: Custom fonts with CSS3 (@font-face)

Tweet

CSS3 is being slowly introduced in our beloved web design world. I say 'slowly' because in reality some of the new properties are already implemented in the latest web browser versions.
One is the @font-face rule. Interestingly enough, I've published something about custom fonts in web pages using JavaScript. With @font-face everything is easier.
Let's see how it works!

JavaScript: Custom fonts for your web pages

Tweet

"I wish I could use a particular font on my home page." Have you ever thought about that? Have you ever wondered how that page would be if a custom font was available?
Now you can. And it is quite simple.

Typeface.js is a 24 kb library. With it you can embed custom fonts in your web page without using images or Flash movies. In the past, when someone needed to create a label with a custom font, an image would have been the solution. I used to create small images for specific labels, but - I must admit - it has always been a pain. When doing it, you have to be very careful, in order to make all labels consistent. When the site is multilingual, the time needed to create those labels, increases incredibly. The result? In my opinion, it is almost always inadequate.