Use a custom font in a Windows Store app (HTML)

By embedding a custom font in your Windows Store app, you can choose from a wider variety of font families and styles in your design while ensuring that any font that you choose will be available to all users of your app. You can find all kinds of fonts to download by using your favorite search engine, but you can embed only the following types of fonts into your Windows Store app:

• A Web Open Font Format (.woff) file

• An Embedded OpenType (.eot) file

• A True Type (.ttf) or Open Type (.otf) file with a font embeddability setting of Installable

  To determine the font embeddability setting of a font, right-click the font file, click Properties, and then click the Details tab, which shows the type and font embeddability settings.

  

Important

As with most types of software, font files are licensed, rather than sold. Licenses that govern the use of fonts vary from vendor to vendor, but in general most licenses, including those that cover the fonts that Microsoft supplies with applications and Windows, don't allow you to embed the fonts within applications or otherwise redistribute them. Therefore, as a developer, it's your responsibility to ensure that you have the required license rights for any font that you embed within an application or otherwise redistribute.

In this topic, you'll learn how to:

• Add a font file to your project

• Create an @font-face rule

• Apply a custom font to a text selection

Add a font file to your project

You can add the font file to your project by:

• Opening the Project menu and then clicking Add Existing Item

• Pressing Ctrl+I

• Copying and pasting

• Dragging

Important

To add files from the Fonts folder (c:\windows\fonts), you need administrative permissions on the local computer.

You don't have to create a folder in your project for the font file or files that you're embedding, but we recommend it.

To create a folder

• Right-click in the Projects panel, click Add New Folder, and then name the folder fonts.

To add the font files

1. With the font folder selected in the Projects panel, open the Project menu, and then click Add Existing Item (Keyboard: Ctrl+I).

2. In the Add Existing Item dialog box, click the font files that you want to add, and then click Open.

   Tip

   You can specify multiple font files by continuously pressing Ctrl as you click each file.

3. At this point, you can:

   • Click Cancel if you don't want to add the fonts to a new or existing @font-face rule. The font files will still be added to your project, but an @font-face rule will not be created.

   • Clear the Create an @font-face rule targeting these fonts check box and click OK if you want to add the fonts to an existing @font-face rule.

   • Confirm that the Create an @font-face rule targeting these fonts check box is selected if you want to create a @font-face rule that targets the fonts that you just added.

     Note

     Only one font name will appear in the font-family field, even if you added multiple files. If you add multiple files and select the Create an @font-face rule targeting these fonts check box, all of the fonts will be added to the same @font-face rule.

   

4. Continue to the next section to create an @font-face rule that targets the fonts that you just added.

Create an @font-face rule

To make a custom font available to your app, you must create an @font-face rule. Your @font-face rule can target a font family (for example, the regular, boldface, and italic versions of a font) or a single font face (for example, just the italic version of a font). Each face is implemented in a font file.

Limelight comprises one font file. Quicksand comprises six font files. The stacked-files icon indicates that the font family comprises multiple faces.

@font-face" title="Blend @font-face" />

For example, if you want to use Quicksand Regular, create an @font-face rule with the font-family property set to Quicksand:

@font-face
{
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Regular.otf') format('opentype');
}

If you want to use Quicksand Bold for all text that should appear in boldface, create an additional @font-face rule with the font-family property to Quicksand and the font-weight property to bold:

@font-face
{
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Regular.otf') format('opentype');
}

@font-face {
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Bold.otf') format('opentype');
       font-weight: bold;
}

In Blend, you can create or edit an @font-face rule by doing one of the following:

• In the Add Existing Item dialog box, make sure that the Create an @font-face rule targeting these fonts check box is selected, and then click OK. (See step 3 in the previous procedure.)

• In the Projects pane, right-click a font file, and then click either Create new @font-face rule or Add to existing @font-face rule.

• In the Style Rules panel, right-click the .css file, click Add At Rule, and then click Add @font-face Rule.

• In the Style Rules panel, right-click a @font-face rule, and then click Edit @font-face Rule.

Each of these options opens the @font-face editor, where you define the properties for your @font-face rule.

The following procedure walks you through how to create an @font-face rule for Quicksand Bold.

To create an @font-face rule

1. Note

   This procedure is a continuation of the procedure "To add the font files" in the previous section.

   In the Add Selected Fonts to @font-face rule dialog box, confirm that the Create an @font-face rule targeting these fonts check box is selected, and then click OK.

   If you add multiple files at the same time, the @font-face editor includes all of the font face files as source files for the font-family, and the font-family name is the same as the first file in the list of files that you added. However, you want to target a specific font face file, and set the properties for that file.

2. In the font-family box, type Quicksand.

3. In the src list, remove the source files by clicking the minus sign (-) to the right of each source file until only Quicksand-Bold.otf remains.

   If you inadvertently remove Quicksand-Bold.otf, you can add it again by clicking the Add Source icon and then clicking opentype. In the opentype list, click Quicksand-Bold.otf.

4. In the font-weight list, click bold, and then click OK.

   @font-face Rule" title="Blend Add @font-face Rule" />

5. To create additional @font-face rules that target different font face files, right-click the font file that you want to target in the Properties panel, and then repeat steps 2 through 4.

Tip

When you create an @font-face rule, it's added after the insertion point in the active .css file. The yellow line in the Style Rules panel indicates the insertion point.

Apply a custom font to a text selection

Now that you've added the custom font to your project and created an @font-face rule, you can apply the font by selecting it from the @font-face Fonts section of the font-family drop-down list in the CSS Properties panel.

In the following procedure, the Limelight font is added to the project for the PickaFlick, the movie app from Create your first Windows Store app with Blend, part 1: the master page (HTML & JavaScript).

To apply the custom font

1. Select the text to which you want to apply the custom font.

2. In the font category of the CSS Properties panel, click the new font in the font-family list.

   Tip

   Notice that the @font-face Fonts list now includes the fonts that you added.

   

   The text that you specified appears in the @font-face font.