Code Example: @font-face

Overview

The following is part of a series of test-based HTML5 applications designed to run on the ActiveVideo platform. These applications incorporate the use of HTML5, JavaScript, and CSS3, and will be used as examples for further development of applications. These are not designed as tutorials for how to run each of the programs, but more of an exploration into some of the useful coding techniques presented.

Including Non-Installed Fonts

This allows the user to display a non-installed font using a ttf file.

Code Highlights

In order to display an existing but non-installed font on your page, you’ll need to include the .ttf file somewhere locally. You may also need an .eot, .woff or .svg file, depending upon the browser. In order for the browser to recognize the font, you will need to create a new font-family in your .css file. Below shows an example using the MuseoSans500 font, with all of the possible font files stored locally alongside the .css file.


@font-face {
font-family: 'MuseoSans500';
src: url('MuseoSans_500-webfont.eot');
src: url('MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
url('MuseoSans_500-webfont.woff') format('woff'),
url('MuseoSans_500-webfont.ttf') format('truetype'),
url('MuseoSans_500-webfont.svg#MuseoSans500') format('svg');
font-weight: normal;
font-style: normal;
}

Now, in order to display text using this font, use the same format as you would with any other font family. Specifically, including it in the .css is done as follows.

#header {
font-family : MuseoSans500
}

  • Thursday, 01 August 2013

Your destination to find out more about just how easy it is to develop advanced applications that leverage the “write-once, deploy-everywhere” content creation environment of ActiveVideo’s CloudTV™ platform. You will be able to significantly reduce app time-to-market for connected devices of all types, as well as cable settop boxes that have no additional connectivity. Manufacturers and virtual service providers, as well as cable and IPTV operators around the world are currently benefiting from the advantages of ActiveVideo’s CloudTV platform.

© 2017 Active Video Networks. All Rights Reserved