How to Add a Web Font to Your Project

Description

Learn how to include web fonts in your web and mobile applications using the @font-face CSS rule in Alpha Anywhere.

Web fonts can be distributed with web and mobile applications. In order to use a web font, the web font must be either included and published with your project or hosted somewhere that the font can be accessed and downloaded via the web.

The CSS @font-face rule can be used to add a web font to your application. @font-face defines where the font can be downloaded. The @font-face rule is specified in the stylesheet used by the application. The URL for the web font files can be an absolute URL or a relative URL. For example, the Alpha style can be extended to include a web font that is included in the Web Project and stored in the same folder as the Alpha theme as follows:

The CSS required to include a web font is often distributed with the font when you download the font from a site such as Font Squirrel.
@font-face{ 
 font-family: 'MyWebFont';
 src: url('css/fonts/WebFont.eot'); /* IE9 Compat Modes */
 src: url('css/fonts/WebFont.eot?iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('css/fonts/WebFont.woff') format('woff'), /* Modern Browsers */
 url('css/fonts/WebFont.ttf') format('truetype'), /* Safari, Android, iOS */
 url('css/fonts/WebFont.svg#webfont') format('svg'); /* Legacy iOS */
}

The font-family property defines the name of the font that will be assigned when the font is loaded from the URL defined in the src property.

Alternatively, you can store the @font-face directive for your font in its own css file and use the @import directive to include the font in your web theme (the imported file location is relative to the file it's declared in or an absolute URL):

@import url("fonts/myWebFont.css"); /* Local Web Font */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); /* Web Font Hosted on a 3rd party site */

After defining the location of the font files, the font can be referenced by the font-family property throughout an application or added to a SASS variable (such as $fontFamily variable defined in the Alpha style) as follows:

$fontFamily: 'MyWebFont', Arial, san-serif; // *AA:Font|Family|fontFamily|The font family to use.

Web Fonts can be referenced anywhere in your application, including in locally defined CSS (such as in the in-line style property for a control) in your components and controls.

Web Fonts can be added to any Version 4 style by Adjusting the theme's font variable(s).

Where to Find Web Fonts 

You can find web fonts at the following sites. These are just a few resources. It is neither a definitive list nor endorsed by Alpha Software.