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 URL for the web font files can be an absolute URL or a relative URL.
The @font-face rule is specified in the CSS used by the application. This CSS can be added to the stylesheet for the web theme, included as a style tweak, or added to the component's local CSS definition. For example, the Alpha theme can be copied and modified to include a web font stored in the same folder as the Alpha theme in the Web Project. The CSS to include the web font is added to the Alpha theme's CSS as follows:
@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. This includes locally defined CSS (such as in the in-line style property for a control) in your components and controls.
You can modify the default font(s) used by a Web Theme using Customize style colors and fonts. The Family variable is a comma delimited list of fonts used by the Web Theme in order of most preferred to least preferred. E.g. MyWebFont, Arial, sans-serif. If the device running your application supports @font-face, "MyWebFont" will be used. On devices where web fonts are unsupported or the font is unavailable, the next available font in the list is used.
It's strongly recommended to include "san-serif", "serif", or other generic font family name as the last font in your font list. See font-family (MDN) to learn more about font families.
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.
Using Custom Fonts in Reports
The steps above are for including custom fonts in your web and mobile application. To use custom fonts in Reports, they must be installed on the application server. See Publishing Fonts to learn more.
Videos
Adjusting Colors and Fonts in a Stylesheet
Alpha Anywhere has always allowed you to edit a stylesheet used by a component to change any of the CSS defined in the stylesheet. But when you simply want to change some colors in a stylesheet, using the style editor may be more than you need.
In this video, we show how you can easily adjust colors and fonts in a style.
See Also