Class HyloFontFile

Defines a font file of a hylo-font component. Place it inside a hylo-font component.

<hylo-font path="path/to/font/folder">
  <hylo-font-file file="ExtraLight.ttf" weight="200"></hylo-font-file>
  <hylo-font-file file="ExtraLightItalic.ttf" weight="200" italic></hylo-font-file>
  <hylo-font-file file="Regular.ttf" weight="400"></hylo-font-file>
  <hylo-font-file file="Italic.ttf" weight="400" italic></hylo-font-file>
  <hylo-font-file file="Bold.ttf" weight="700"></hylo-font-file>
</hylo-font>

Properties

file italic preload variable weight

Properties

file

file: string

The font file.

Use the following format to target IE/Edge versions:

  • .otf, .ttf or .woff for IE 9+
  • .woff2 for Edge 14+

italic

italic: boolean = false

Is the font italic?

preload

preload: boolean = false

Marks the font file to be preloaded and not lazy loaded.

variable

variable: string

Defines the font file as a variable font. The properties "weight" and "italic" are ignored.

A set of css properties (axes) separated by ";" which define the variable font. Can be an empty string.

E.g.: 'font-style: normal;' or 'font-style: italic;' or 'font-weight: 100 1000; font-stretch: 75% 125%; font-style: oblique 0deg 20deg;'

weight

weight: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" = '400'

The font weight.

The following sass variables can be used to represent the weight:

  • $thin: 100 - Extra Light or Ultra Light
  • $light: 200 - Light or Thin
  • $book: 300 - Book or Demi
  • $regular: 400
  • $medium: 500
  • $semi: 600 - Semibold, Demibold
  • $bold: 700
  • $heavy: 800 - Black, Extra Bold or Heavy
  • $ultra: 900 - Extra Black, Fat, Poster or Ultra Black These variables are defined in hylo-components/global/scss/variable.scss.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc