---
title: "FontFace | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface FontFace

The **`FontFace`** interface of the CSS Font Loading API represents a single usable font face.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace)

interface FontFace {  
    [ascentOverride](#ascentoverride): string;  
    [descentOverride](#descentoverride): string;  
    [display](#display): [FontDisplay](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.FontDisplay/);  
    [family](#family): string;  
    [featureSettings](#featuresettings): string;  
    [lineGapOverride](#linegapoverride): string;  
    [loaded](#loaded): Promise<FontFace\>;  
    [status](#status): [FontFaceLoadStatus](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.FontFaceLoadStatus/);  
    [stretch](#stretch): string;  
    [style](#style): string;  
    [unicodeRange](#unicoderange): string;  
    [variationSettings](#variationsettings): string;  
    [weight](#weight): string;  
    [load](#load-1)(): Promise<FontFace\>;  
}

##### Index

### Properties[](#properties)

[ascentOverride](#ascentoverride) [descentOverride](#descentoverride) [display](#display) [family](#family) [featureSettings](#featuresettings) [lineGapOverride](#linegapoverride) [loaded](#loaded) [status](#status) [stretch](#stretch) [style](#style) [unicodeRange](#unicoderange) [variationSettings](#variationsettings) [weight](#weight)

### Methods[](#methods)

[load](#load)

## Properties[](#properties-1)

### ascentOverride[](#ascentoverride)

ascentOverride: string

The **`ascentOverride`** property of the FontFace interface returns and sets the ascent metric for the font, the height above the baseline that CSS uses to lay out line boxes in an inline formatting context.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/ascentOverride)

### descentOverride[](#descentoverride)

descentOverride: string

The **`descentOverride`** property of the FontFace interface returns and sets the value of the descent-override descriptor. The possible values are normal, indicating that the metric used should be obtained from the font file, or a percentage.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/descentOverride)

### display[](#display)

display: [FontDisplay](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.FontDisplay/)

The **`display`** property of the FontFace interface determines how a font face is displayed based on whether and when it is downloaded and ready to use. This property is equivalent to the CSS font-display descriptor.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/display)

### family[](#family)

family: string

The **`FontFace.family`** property allows the author to get or set the font family of a FontFace object.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/family)

### featureSettings[](#featuresettings)

featureSettings: string

The **`featureSettings`** property of the FontFace interface retrieves or sets infrequently used font features that are not available from a font's variant properties.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/featureSettings)

### lineGapOverride[](#linegapoverride)

lineGapOverride: string

The **`lineGapOverride`** property of the FontFace interface returns and sets the value of the line-gap-override descriptor. The possible values are normal, indicating that the metric used should be obtained from the font file, or a percentage.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/lineGapOverride)

### `Readonly`loaded[](#loaded)

loaded: Promise<FontFace\>

The **`loaded`** read-only property of the FontFace interface returns a Promise that resolves with the current FontFace object when the font specified in the object's constructor is done loading or rejects with a SyntaxError.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/loaded)

### `Readonly`status[](#status)

status: [FontFaceLoadStatus](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.FontFaceLoadStatus/)

The **`status`** read-only property of the FontFace interface returns an enumerated value indicating the status of the font, one of "unloaded", "loading", "loaded", or "error".

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/status)

### stretch[](#stretch)

stretch: string

The **`stretch`** property of the FontFace interface retrieves or sets how the font stretches.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/stretch)

### style[](#style)

style: string

The **`style`** property of the FontFace interface retrieves or sets the font's style.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/style)

### unicodeRange[](#unicoderange)

unicodeRange: string

The **`unicodeRange`** property of the FontFace interface retrieves or sets the range of unicode code points encompassing the font.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/unicodeRange)

### variationSettings[](#variationsettings)

variationSettings: string

The **`variationSettings`** property of the FontFace interface retrieves or sets low-level OpenType or TrueType font variations.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/variationSettings)

### weight[](#weight)

weight: string

The **`weight`** property of the FontFace interface retrieves or sets the weight of the font.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/weight)

## Methods[](#methods-1)

### load[](#load)

-   load(): Promise<FontFace\>[](#load-1)
    
    The **`load()`** method of the FontFace interface requests and loads a font whose source was specified as a URL. It returns a Promise that resolves with the current FontFace object.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/FontFace/load)
    
    #### Returns Promise<FontFace\>