Astra Standard Font CDN

Official self-hosted font delivery for Astra applications • Featuring Inter, Inter Display, Roboto, Work Sans, Poppins, and Cascadia Code

🛡️ Font License Safe Criteria

Important guidelines for compliant font usage in applications:

✅ Primary Font Requirements

  • Primary font family (first in font-stack) MUST be Open Source Font according to standard: Inter, Work Sans, Roboto, Poppins, or Cascadia
  • If any non-standard font (e.g., Frutiger) appears as primary font, it MUST be replaced with approved standard fonts

⚠️ Secondary Font Guidelines

  • Non-standard fonts in secondary positions or with strikethrough require verification:
  • ✓ Ensure NO font files (.ttf, .otf, .woff, .woff2) exist in source code
  • ✓ If font files found, they MUST be removed
  • ✓ After removal, secondary fonts are permitted if primary font remains Open Source

📄 Document Generation Exceptions

  • Excel Reports: Calibri font is permitted (Microsoft Product standard license)
  • SAP PDF Reports: SAP standard fonts are permitted
  • Non-SAP PDF Reports: Only standard fonts allowed ( Inter, Work Sans, Roboto, Poppins, Cascadia )

💻 CSS Implementation Examples

✅ COMPLIANT Examples
body {
    font-family: 'Inter', sans-serif; ✓ Standard font first
}

.heading {
    font-family: 'Poppins', 'Helvetica', sans-serif; ✓ Standard first, fallbacks OK
}

❌ NON-COMPLIANT Examples
.bad-example {
    font-family: 'Frutiger', 'Inter', sans-serif; ❌ Non-standard font first
}

✅ CORRECTED Version
.good-example {
    font-family: 'Inter', 'Frutiger', sans-serif; ✓ Standard font first
}

⚠️ Compliance Note: Always ensure the first font in your font-family declaration is one of the approved Open Source fonts to maintain license compliance.

Inter

The quick brown fox jumps over the lazy dog
Inter is a carefully crafted typeface designed for computer screens. It features a tall x-height to aid in readability of mixed-case and lower-case text. This font family supports variable font technology, making it perfect for modern web applications.
Thin (100)
Typography matters
Light (300)
Typography matters
Regular (400)
Typography matters
Medium (500)
Typography matters
Semi Bold (600)
Typography matters
Bold (700)
Typography matters
Black (900)
Typography matters
Italic
Typography matters

Inter Display

Headlines and Display Text
Inter Display is optimized for headlines and display usage. It features tighter spacing and refined letterforms that work exceptionally well at larger sizes. Perfect for headers, titles, and any prominent text elements.
Light (300)
Modern Design
Regular (400)
Modern Design
Medium (500)
Modern Design
Semi Bold (600)
Modern Design
Bold (700)
Modern Design
Black (900)
Modern Design

Roboto

Clean and Versatile Typography
Roboto is a neo-grotesque sans-serif typeface family developed by Google. It has a dual nature with friendly and open curves alongside structured and geometric forms. Roboto is the default font family for Android and Chrome OS.
Thin (100)
Google's Choice
Light (300)
Google's Choice
Regular (400)
Google's Choice
Medium (500)
Google's Choice
Bold (700)
Google's Choice
Black (900)
Google's Choice
Italic
Google's Choice

Work Sans

Professional and Readable
Work Sans is a 9 weight typeface family based loosely on early grotesques. It's optimized for work environments and perfect for both digital and print applications. The font maintains excellent readability across all weights.
Thin (100)
Work Environment
Light (300)
Work Environment
Regular (400)
Work Environment
Medium (500)
Work Environment
Semi Bold (600)
Work Environment
Bold (700)
Work Environment
Black (900)
Work Environment
Italic
Work Environment

Poppins

Modern and Geometric
Poppins is a geometric sans serif typeface with a clean, modern look. Each letterform is nearly monolinear, with optical corrections applied to stroke joints where necessary to maintain an even typographic color.
Thin (100)
Modern Design
Light (300)
Modern Design
Regular (400)
Modern Design
Medium (500)
Modern Design
Semi Bold (600)
Modern Design
Bold (700)
Modern Design
Black (900)
Modern Design
Italic
Modern Design

Cascadia Code / Cascadia Mono

const hello = () => 'world';
Cascadia Code is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal. Cascadia Mono is the same font without ligatures.
Cascadia Mono
console.log('Hello, World!');
Cascadia Code (with ligatures)
const sum = (a, b) => a + b;
Code Block Example
function fibonacci(n) {
  return n <= 1 ? n : fibonacci(n-1) + fibonacci(n-2);
}
Symbols & Operators
!= >= <= === !== ->

How to Use These Fonts

To use these fonts in your project, simply include the CSS file and use CSS variables:

<!-- Include the font CSS -->
<link rel="stylesheet" href="https://fonts.astra.id/fonts/fonts.css">

<!-- Optional: Preload critical fonts for better performance -->
<link rel="preload" href="https://fonts.astra.id/fonts/inter/InterVariable.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.astra.id/fonts/inter/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.astra.id/fonts/roboto/Roboto-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.astra.id/fonts/worksans/WorkSans-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.astra.id/fonts/poppins/Poppins-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.astra.id/fonts/cascadiacode/CascadiaMono.woff2" as="font" type="font/woff2" crossorigin>

<style>
/* Method 1: Using CSS Variables */
body {
 font-family: var(--font-astra1); /* Inter */
 font-weight: var(--font-weight-regular);
}

h1, h2, h3 {
 font-family: var(--font-astra2); /* Inter Display */
 font-weight: var(--font-weight-bold);
}

.roboto-text {
 font-family: var(--font-roboto);
 font-weight: var(--font-weight-medium);
}

.work-sans-text {
 font-family: var(--font-work-sans);
 font-weight: var(--font-weight-medium);
}

.poppins-text {
 font-family: var(--font-poppins);
 font-weight: var(--font-weight-medium);
}

code, pre {
 font-family: var(--font-astra-mono); /* Cascadia Mono with Cascadia Code fallback */
}

/* Method 2: Override variables for theming */
:root {
 --font-weight-bold: 600; /* Use semi-bold instead of bold */
}

/* Method 3: Inter variable font with custom weights */
.custom-weight {
  font-family: var(--font-inter);
 font-weight: 450; /* Custom weight between regular and medium */
 font-variation-settings: 'wght' 450;
}
</style>

CSS Variables Reference

Available CSS variables for easy customization and theming:

/* Font Family Variables */
--font-inter /* 'Inter' */
--font-inter-display /* 'Inter Display' */
--font-roboto /* 'Roboto' */
--font-work-sans /* 'Work Sans' */
--font-poppins /* 'Poppins' */
--font-cascadia-code /* 'Cascadia Code' */
--font-cascadia-mono /* 'Cascadia Mono' */

/* Font Stack Variables (no fallbacks) */
--font-stack-inter /* Inter only */
--font-stack-inter-display /* Inter Display only */
--font-stack-roboto /* Roboto only */
--font-stack-work-sans /* Work Sans only */
--font-stack-poppins /* Poppins only */
--font-stack-cascadia-code /* Cascadia Code only */
--font-stack-cascadia-mono /* Cascadia Mono only */

/* Generic Font Variables */
--font-astra1 /* Same as --font-stack-inter */
--font-astra2 /* Same as --font-stack-inter-display */
--font-astra3 /* Same as --font-stack-roboto */
--font-astra4 /* Same as --font-stack-work-sans */
--font-astra5 /* Same as --font-stack-poppins */
--font-astra-mono /* Cascadia Mono with Cascadia Code fallback */

/* Font Weight Variables */
--font-weight-thin /* 100 */
--font-weight-extra-light /* 200 */
--font-weight-light /* 300 */
--font-weight-regular /* 400 */
--font-weight-medium /* 500 */
--font-weight-semi-bold /* 600 */
--font-weight-bold /* 700 */
--font-weight-extra-bold /* 800 */
--font-weight-black /* 900 */

CSS Utility Classes

You can use either CSS variables directly or the provided utility classes:

<!-- Font Family Classes -->
<div class="font-astra1">Text using Inter font (Generic)</div>
<div class="font-astra2">Text using Inter Display font (Generic)</div>
<div class="font-astra3">Text using Roboto font (Generic)</div>
<div class="font-astra4">Text using Work Sans font (Generic)</div>
<div class="font-astra5">Text using Poppins font (Generic)</div>
<div class="font-astra-mono">Code using Cascadia Mono font (Generic)</div>

<div class="font-inter">Text using Inter font (Specific)</div>
<div class="font-inter-display">Text using Inter Display font (Specific)</div>
<div class="font-roboto">Text using Roboto font (Specific)</div>
<div class="font-work-sans">Text using Work Sans font (Specific)</div>
<div class="font-poppins">Text using Poppins font (Specific)</div>
<div class="font-cascadia-mono">Code using Cascadia Mono font (Specific)</div>
<div class="font-cascadia-code">Code using Cascadia Code font (Specific)</div>

<!-- Font Weight Classes -->
<div class="font-inter font-thin">Thin Inter text</div>
<div class="font-roboto font-bold">Bold Roboto text</div>
<div class="font-poppins font-medium">Medium Poppins text</div>
<div class="font-astra1 font-medium">Medium weight using Astra1</div>

<!-- Code Examples -->
<code class="font-astra-mono">console.log('Hello, World!');</code>
<pre class="font-cascadia-code">const arrow = () => 'ligatures';</pre>

<!-- Combining CSS Variables -->
<div style="font-family: var(--font-astra2); font-weight: var(--font-weight-black);">
Black weight Inter Display using variables
</div>