Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

@font-face

The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.

Syntax

@font-face {
  [ font-family: <string>; ] ||
  [ src: url(<string>) | local(<string>); ]
}

Values

font-family

Specifies a name that will be used as the font face value for font or font-family properties.

src

Use a comma-separated list to specify available fonts. Use url() function for remote fonts and Base64-encoded fonts.Use local() function for local fonts.

INFO

On Android:use local(file://absolute/path) for absolute font paths On iOS:use local(font-name) for system-installed font names (e.g. local(xxx-light))

CAUTION

Supported font formats:

Android: TTF, OTF, TTC

iOS: TTF, OTF, WOFF (iOS 10+), WOFF2 (iOS 10+)

Example

textsrc/font_face/index.tsx
Preview

Difference from W3C

Not support font-style,font-weight and font-variant.

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.