Intel® XDK Typefaces Sample

The source code for this sample can be found here: or download the Intel® XDK to check out all the HTML5 Samples.


This application demonstrates how to include unique fonts in an HTML5 hybrid app.

Source Code

The Typefaces sample application allows users to compare a few HTML elements using an array of different open-source font types. The application will demonstrate how to embed external font files into a hybrid application, as well as how to switch between font types. The application opens initially using the Amble font. The HTML elements on the screen include a headline, a quote, a subheading, some body text, an input field with some placeholder text, and a button. These elements are given the Amble font by using a series of @font-face CSS commands in the /css/fonts.css file. Changing the font used in these HTML elements using JavaScript is achieved just by swapping out CSS classes that contain references to these font files. The buttons at the bottom of the app each call separate functions that do this located in the js/main.js file.


This sample application has been tested on a variety of iOS and Android devices.


Please make sure to take appropriate licensing steps for any fonts used in an application. Using a font without proper attribution or compensation can be hazardous to your app.