cataloguefontsource · api.fontsource.org

Aileron

6 weightsroman + italic1 subsets12 faces resolved

size 72px

leading 1.10

tracking -0.02em

weight

italic

Choose what to load

Aileron publishes more than you probably need. Each group keeps at least one selection, so the last one in a group can't be turned off.

12 faces resolved from 6 weights × 2 styles × 1 subset

Weights

Styles

Subsets

What you get

Coverage

Checked against the unicode-range of every face this selection resolved.

latinThe quick brown fox jumps over the lazy dogno range declared
latin-extZażółć gęślą jaźń — příšerně žluťoucký kůňno range declared
vietnameseTôi có thể ăn thủy tinh mà không hại gìno range declared
greekΞεσκεπάζω την ψυχοφθόρα βδελυγμίαno range declared
cyrillicСъешь же ещё этих мягких французских булокno range declared
currency£ € $ ¥ ₹ ₽ ₩ ₪ ₴ ₦no range declared
punctuation“curly” ‘quotes’ — em dash … ellipsis † ‡ § ¶no range declared
maths≈ ≠ ≤ ≥ ± × ÷ ∑ √ ∞no range declared

Detail

Formats: woff2, woff, ttf (what the provider can serve. This page asks for woff2)
Fallbacks: sans-serif
Also on: only fontsource
Transfer: measuring…

Ship it

Exactly the selection above.

CSS

/* latin */
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/aileron@latest/latin-100-normal.woff2") format("woff2");
  font-display: swap;
  font-weight: 100;
  font-style: normal;
}

/* latin */
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/aileron@latest/latin-300-normal.woff2") format("woff2");
  font-display: swap;
  font-weight: 300;
  font-style: normal;
}

/* latin */
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/aileron@latest/latin-400-normal.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* latin */
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/aileron@latest/latin-600-normal.woff2") format("woff2");
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

/* latin */
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/aileron@latest/latin-700-normal.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

/* latin */
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/aileron@latest/latin-800-normal.woff2") format("woff2");
  font-display: swap;
  font-weight: 800;
  font-style: normal;
}

/* latin */
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/aileron@latest/latin-100-italic.woff2") format("woff2");
  font-display: swap;
  font-weight: 100;
  font-style: italic;
}

/* latin */
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/aileron@latest/latin-300-italic.woff2") format("woff2");
  font-display: swap;
  font-weight: 300;
  font-style: italic;
}

/* latin */
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/aileron@latest/latin-400-italic.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: italic;
}

/* latin */
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/aileron@latest/latin-600-italic.woff2") format("woff2");
  font-display: swap;
  font-weight: 600;
  font-style: italic;
}

/* latin */
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/aileron@latest/latin-700-italic.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: italic;
}

/* latin */
@font-face {
  font-family: "Aileron";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/aileron@latest/latin-800-italic.woff2") format("woff2");
  font-display: swap;
  font-weight: 800;
  font-style: italic;
}

:root {
  --font-aileron: Aileron, "Aileron fallback", sans-serif;
}

/*
 * Metric-matched fallback, generated with fontaine. Put it after the family in your
 * stack (`font-family: "Aileron", "Aileron fallback", sans-serif`)
 * and the text will not move when the real font arrives.
 */
@font-face {
  font-family: "Aileron fallback";
  src: local("sans-serif");
  size-adjust: 100%;
  ascent-override: 89.502%;
  descent-override: 24.2676%;
  line-gap-override: 0%;
}

Type tester