(Print this page)

Embed a font in a WPF application
Published date: Tuesday, August 25, 2015
On: Moer and Éric Moreau's web site

Once in a while, I have this request to produce barcode in apps. I even wrote an article about that back in 2007 during the Windows Forms era.

This time, I have to do it for a WPF application. Probably still the easiest way is to produce a barcode is to use a font. So I started to look around to find a font and find a way to distribute the font without installing it on all computers.

This month demo app

This month solution was created using Visual Studio 2015 even if the very same code would work as well in older version of WPF. The solution provides both a VB and a C# project.

Figure 1: The demo application

Finding your font

Fonts are subject to licensing. Some are free. Some requires to be paid. For the purpose of that article, I found a very simple but fully free barcode font. It is a true type font (TTF) using Code 39. You can download it from http://m.barcodesinc.com/free-barcode-font/.

You will find that the downloaded package contains 2 fonts. A regular one and an extended one. If you want to encode digits only, you can use both of them. But if you want to also encode letters, you will need to use extended one.

Adding the font to your project

As I have said in the introduction, I don’t want to install the font on all computers. I want it to be distributed with the application. I have chosen to embed it as a resource.

So the first thing you need to do is to add the font to your project.

Figure 2: Adding the font file to your project

As you can see on figure 2, I have added the font file (.ttf) to a folder of my project that I have named Resources (but the name of that folder is not important). The important thing here is to ensure that he Build Action is set to Resource.

Now that you have the font in your project you can reference it for any control like this:

<TextBlock Name="tbBarCode" 
           Grid.Row="1" Grid.Column="1" 
           FontFamily="./Resources/#Free 3 of 9 Extended"
           FontSize="50"/>

If you look carefully at the FontFamily tag, you will see a couple of elements worth explaining:

  • The ./ indicates WPF to go back to the root of the project
  • Resources is the name of your folder
  • The # sign to tell WPF to dig into the resource name to find the name
  • Finally, the name of the font. This one is particular. It is not the name of the file. It really is the name of the font. So how do you find it? Double click the font and that will open the font dialog. The Font Name property is the value you really want.

Figure 3: Finding the name of the font

Sometimes, you might find out some website saying to open the font file properties and to look under the Details tab. I find out that it is not always the exact name. For example, this barcode font has the word Regular at the end of it.

Finalizing the demo

We are done regarding the font itself. It is embedded as a resource and the TextBlock has its FontFamily set.

The other thing this demo is doing is to capture the TextChanged event of the TextBox to immediately generate the corresponding barcode. This is the code you will find:

Private Sub TextBoxBase_OnTextChanged(sender As Object, e As TextChangedEventArgs)
    tbBarCode.Text = "*" + tbInput.Text + "*"
End Sub

The stars added to the beginning and the end of the string are a requirement of this barcode font to make it readable by barcode reader device (such as your phone!).

Other options

You don’t have to embed your font in your application. It is just an option amongst others. Other options include:

  • Fully installing the font on the computer
  • Copying the font file in a folder accessible by your application
  • Find a component that will draw a barcode from scratch (if what you need is a barcode)

Conclusion

It is easy to produce barcodes in a WPF application. This article showed you how to get one by embedding a font in your application.


(Print this page)