FreeType is a freely available software library to render fonts. We've verified that the organization freetype controls the domain: www.freetype.org. Learn more about verified organizations. FreeType is a software font engine that is designed to be small, efficient, highly customizable and portable while capable of producing high-quality output (glyph images). It can be used in graphics libraries, display servers, font conversion tools, text image generation tools, and many other products as well.

0.7

So here's a quick tutorial to show you how to use the FreeType font rendering library in OpenGL. By using the FreeType library we can create anti-aliased text that looks better than text make using bitmap fonts (as in lesson 13). Our text will also have some other advantages over bitmap fonts - it will be easy to rotate and work well with OpenGL's picking functions.

Freetype Library Download

Motivation

Here I've printed out the same text using both WGL bitmap fonts and fonts rendered with FreeType as per this tutorial (both are Arial Black Italic).The basic problem with using bitmaps fonts is that in OpenGL bitmaps are by definition binary images. This means that an OpenGL bitmap stores only one bit of information per-pixel. If you zoom in on the text created using WGL bitmaps, the result looks like this:Because bitmaps are binary images, there are no gray pixels in the image above, and it means that the text looks blocky.

Luckily it is fairly easy to make better looking fonts using the GNU FreeType library. FreeType is the same library that Blizzard uses to render the fonts in their games, so you know it has to be good!

Here's a close up of the text that I've created with the help of the FreeType library:

You can see that there are a fair number of gray pixels around the edges of the text, this is the typical of an anti-aliased font, the gray pixels make the font look smoother from a distance.

Creating the Program

The first step is to get yourself a copy of the GNU FreeType library. Go to http://gnuwin32.sourceforge.net/packages/freetype.htm and download the binaries and developer files. When you install it make sure to notice the licensing terms, which basically say that if you are going to use FreeType in your own programs, you need to give them credit somewhere in your documentation.

Now we need to setup MSVC to use FreeType. So create new project as in lesson 1 , but when you go to Project->Settings->Link add libfreetype.lib to Object Modules / libraries along with opengl32.lib, glu32.lib and glaux.lib.

Next we need to go to Tools->Options->Directories and add the FreeType library directories. Under 'Show Directories For' select 'Include Files', then double click on the empty line at the bottom of the directory list, after you double click a '...' button will appear that you can use to browse for a directory. In this way add

and To you list of header directories.

Now under 'Show Directories For' select 'Library Files', and this time add

At this point we should be able to compile programs using FreeType, but they won't run unless they can access the freetype-6.dll. Right now you have a copy of that DLL file in your GNUWIN32BIN directory, and if you put it somewhere where all your programs can see it (Program FilesMicrosoft Visual StudioVC98Bin is a good choice), you will be able to run programs using FreeType. But remember that if you distribute a program that you have made using FreeType, you will need to also distribute copies of the DLL along with it.

Ok, now we can finally start writing code. I've decided to work off the lesson13 source, so grab a copy of lesson 13 if you don't have one already. Copy lesson13.cpp to your project directory, and add the file to the project.

Now add and create two new files called 'freetype.cpp' and 'freetype.h'. We will put all our FreeType specific code into these files, and then modify lesson13 a little to show off the functions that we've written. When we are done, we will have created a very simple OpenGL FreeType library that could theoretically be used in any OpenGL project.

We will start with freetype.h.

Naturally, we need include the FreeType and OpenGL headers. We will also include some handy parts of the Standard Template Library, including STL's exception classes, which will make it easier for us create nice debugging messages.

We will put all the information that each font needs into one structure (this will make managing multiple fonts a little easier). As we learned in lesson13, when WGL creates a font, it generates a set of consecutive display lists. This is nifty, because it means that you can use glCallLists to print out a string of characters with just one command. When we create our font we will set things up the same way, which means that the list_base field will store the first of 128 consecutive display lists. Because we are going to use textures to draw our text, so we will also need storage for the 128 associated textures. The last bit of info that we will need is the height, in pixels, of the font that we have created (this will make it possible to handle newlines in our print function).

The last thing we need is a prototype for our print function:

And that's the end of the header file! Time to open up freetype.cpp.

We are using textures to display each character in our font. OpenGL textures need to have dimensions that are powers of two, so we need to pad the font bitmaps created by FreeType to make them a legal size. That's why we need this function:

The next function that we need is make_dlist, it is really the heart of this code. It takes in an FT_Face, which is an object that FreeType uses to store information about a font, and creates a display list coresponding to the character which we pass in.

Freetype Library Mingw32

Now that we have a bitmap created by Freetype, we need to pad it with empty pixels to make it a legal source for an OpenGL texture. It's important to remember that while OpenGL uses the term 'bitmap' to mean binary images, in FreeType bitmaps store 8 bits of information per pixel, so FreeType's bitmaps can store the grays that we need to create anti-aliased text.

With the padding done, we can get onto creating the OpenGL texture. We are including an alpha channel so that the black parts of the bitmap will be transparent, and so that the edges of the text will be slightly translucent (which should make them look right against any background).

We use texture mapped quads to draw our text. This means that it will be easy to rotate and scale text, and it will also make fonts inherit their color from the current OpenGL color (none of which would be true if we used pixmaps).

The next function that we are going to create will use make_dlist to create a set of display lists corresponding to a given font file and pixel height.

FreeType uses truetype fonts, so you will want to find yourself some truetype font files to feed into this function. Truetype font files are very common, and there are a bunch of sites out there where you can download lots of different truetype fonts for free. Windows98 used truetype for nearly all of it's fonts, so if you can find an old computer running windows98, you can get all of the standard fonts in truetype format from its windows/fonts directory.

Now we need a function to cleanup all the displaylist and textures associated with a font.

Here are two little functions that we are going to define in anticipation of our print function. The print function is going to want to think in pixel coordinates (also called window coordinates), so we are going to need to switch to a projection matrix that makes everything measured in pixel coordinates.

We are using two very handy OpenGL functions here, glGet to get the window dimensions, and glPush/PopAttrib to make sure that leave the matrix mode in the same state as we found it. If you are not familiar with these functions, it's probably worth your time to look them up in your favorite OpenGL reference manual.

Our printing function looks very much like the one from lesson 13, but there are a couple of important differences. The OpenGL enable flags that we set are different, which reflects the fact that we are actually using 2 channel textures rather than bitmaps. We also do a little extra processing on the line of text that we get in order to properly handle newlines. Because we are such good samaritans, we take care to use OpenGL's matrix and attribute stacks to ensure that the function undoes any changes that it makes to OpenGL's internal state (this will prevent anyone using the functio