Type Style Guide Webflow Native

Glyph alternates

Every alternate in stylistic sets 1–5 and the discretionary ligatures, shown in full. Left is the default glyph; right is the alternate the set activates. Shown here in Light. Verified against the font files — this is the complete set of what Asoma actually contains for these features.

ss01Normalized

E→E

R→R

S→S

a→a

g→g

s→s

y→y

ss02Open

A→A

E→E

J→J

M→M

R→R

S→S

T→T

g→g

h→h

k→k

m→m

n→n

s→s

t→t

ss03Hooked

A→A

M→M

S→S

h→h

m→m

n→n

s→s

ss04Curved leg

A→A

M→M

R→R

S→S

s→s

ss05Extended

A→A

K→K

M→M

R→R

s→s

dligLigatures

AC→AC

AS→AS

CA→CA

EA→EA

EM→EM

ES→ES

FT→FT

ME→ME

MS→MS

RA→RA

RS→RS

ST→ST

TT→TT

es→es

fa→fa

ks→ks

ra→ra

sa→sa

ts→ts

Weights

Asoma ships in five weights. Every stylistic set and ligature is present and identical across all of them — an alternate you pick in Thin behaves the same in Heavy. Each line below carries the same text so you can read the family's range at a glance.

Thin

100

CATERING FOR EVERY OCCASION

Light

300

CATERING FOR EVERY OCCASION

Medium

500

CATERING FOR EVERY OCCASION

Bold

700

CATERING FOR EVERY OCCASION

Heavy

900

CATERING FOR EVERY OCCASION

Alternates in context

The reason the alternates exist: display settings where a single swapped glyph changes the whole character of a word. Each specimen below is built from live text with the exact stylistic sets called out in its caption — nothing here is an image.

Four
Seasons
of Love

Four Seasons of Love

Light 300

s → ss02 (open)

r → ss04

Nose
Talgia

NoseTalgia

Thin 100

s → ss03 (hooked)

LASt

on
thE

HousE

LEFT

Last House on the Left

Bold 700

AS → dlig

s → ss05

E → ss01

Sign ofthe
Times

Sign of the Times

Bold 700

m → ss03 (hooked)

Gladys Knight
& the Pips

VISIONS

Gladys Knight & the Pips — Visions

Thin 100

h → ss03

S → ss03

MEAN

STREETS

Mean Streets

Bold 700

M → ss05

EA → dlig

S, R → ss04

How the implementation works

Every alternate above is one CSS property — font-feature-settings — applied to a span wrapping the specific character. In Webflow this is fully native: the classes stay editable in the Designer.

Setup in Webflow

STEP 1

Upload all five weights

Site Settings → Fonts → Custom Fonts. Confirm the file keeps its OpenType tables.

STEP 2

Create the feature classes

Add the six classes (ss01–ss05, dlig) as real Webflow styles. They then live site-wide and stay editable.

STEP 3

Wrap & assign

Highlight a single letter, wrap it in a span, and assign the matching class. Position within the word doesn't matter.

NOTE

Ligatures are two letters

For dlig pairs (AS, EA, ST…) wrap both characters in one span.

The complete stylesheet

/* Site Settings › Custom Code › <head> */

.ss01 { font-feature-settings: "ss01" 1; }
.ss02 { font-feature-settings: "ss02" 1; }
.ss03 { font-feature-settings: "ss03" 1; }
.ss04 { font-feature-settings: "ss04" 1; }
.ss05 { font-feature-settings: "ss05" 1; }
.dlig { font-feature-settings: "dlig" 1; }

/* Usage in markup */
Fou<span class="ss04">r</span>

/* Ligature — wrap the pair */
L<span class="dlig">AS</span>t

Funky Eatery

Glyph alternates

Weights

Alternates in context

How the implementation works