Here are all of the HTML attributes you can use with any FontScript fs-text element.
Change the font-size of your FontScript element. You can use either normal HTML tags (i.e., p and h1) or custom sizes using different metrics (i.e., px, em, rem, or %). If the HTML tag or size you choose is invalid, then FontScript will default to p.
This attribute has been depreciated due to the fact that the first src attribute overrides all others on the page. We recommend using a CSS file with the font attribute as an alternative.
Load a custom font file to serve as the source for the text element. The file must be a valid font file and have a valid font extension (i.e., .ttf, .otf, .woff2, etc.) The source can either be relative (i.e., ./fonts/MyFont.ttf) or absolute (i.e., https://mysite.com/fonts/MyFont.ttf). If the file is invalid or unaccessible, FontScript will default back to the user’s sans-serif font.
If you define a src file, then you do not need to use this attribute, as the FontScript element will assume that font is the one you wish to use.
Create font stacks for custom fonts and fallback fonts loaded from FontScript’s default library, a custom CSS file, or the user’s system.
To use one of FontScript’s default fonts, then use the family name as shown in our [Default Fonts](ADD URL HERE) list. For example: font="Bookmann".
To utilise one of your custom fonts, make sure you provide a CSS file that contains the fonts somewhere in your page’s HTML code. Alternatively, you can use fonts from the Barclay Fonts library. For example: font="MyFont" or font="Spike Gothic".
To access a user’s system fonts, just type out the name as you would in regular CSS code. For example: font="Georgia".
To use multiple fonts to create a font stack, type out the order of the fonts, but do not use extra quotes like regular CSS. For example: font="Buchmann, Georgia, Times New Roman" but not font="'Buchmann', Georgia, Times New Roman".
Define the generic font weight and style of the text. There are four options: regular (used by default), italic, bold, and bold italic. If you are using a variable font or a font family with other weights, see the variations and weight attributes.
Customze each FontScript element using basic CSS properties like color, margin, etc.
Access mapped variable font features like weight, italic/slant, etc. In order to use this, you must know the axes of each variable font. You can see the names and available inputs of each axis using the Font Playground. If your font only has a weight axis, you could access it by using variations="'wght' 900. If your font has multiple axes, you need to separate them like this: variations="'wght' 320, 'ital' -10. Make sure you put each axis in quotes and use a valid input.
Define the use of OpenType features for any fonts that have OpenType tables mapped out. To see a font’s available OpenType tables, use the Font Playground. If your font has discretionary ligatures (dlig), then you could access them like this: features="'dlig' on". To use multiple features, do: features="'aalt' on, 'dlig' on".
If you are using any of the FontScript default fonts, then you have the option to use their WOFF2 files. By default, all default fonts are loaded in TrueType format. WOFF2 has become the standard file format for web development. Use woff2="true" to enable the variants.
Define weights other than the ones allowed in the stylemap attribute. This is useful if your CSS file has static font families that have different weights that you need, like 300 and 900 (light and black respectively). If you enter an invalid weight, then FontScript will default to 400, but if the weight is valid but the font family does not have the specified weight, then it will default to the closest defined one. FontScript allows weights to range from 100 to 900 (thin to black). This attribute is recommended for static font families because each instance must be defined with a font-weight tag in your CSS, leading to less options. To italicize your text, see the italic section. For example: weight="600".
Define if a FontScript element has italic text. We recommend you use this in conjuction with the weight attribute. If your CSS contains italic variants of your fonts, then they will be applied, otherwise faux-italics will be used. To use this attribute, write italic="true".
FontScript is designed to be similar to a normal HTML element, like <p>. Therefore, you are able to use HTML tags inside the fs-text element. For example: <fs-text font="Arial"><h1><i>HELLO WORLD</i></h1></fs-text>. There are endless possibilities with FontScript!