Principality of KaharagiaDesign System

Fonts

The Kaharagia Design System uses the Noto font family across all government digital services. This page provides guidance on font usage, installation, and downloads.

Why Noto Fonts?

We chose the Noto font family for Kaharagian government services for several important reasons:

  • Exceptional language coverage — Noto is designed to support all languages in the Unicode standard. With over 150 language scripts supported, it ensures that names, places, and text in any language display correctly without missing characters (no more "tofu" □ boxes).
  • Consistency across scripts — Whether displaying Latin, Cyrillic, Greek, Arabic, Chinese, or any other script, Noto maintains visual harmony and consistent styling.
  • Open source and free — Noto is released under the SIL Open Font License, making it freely available for all government and public use without licensing concerns.
  • Professional quality — Developed by Google and Monotype, Noto fonts are professionally designed with excellent readability at all sizes.
  • Complete font family — Noto includes Sans, Serif, and Mono variants with full weight ranges, providing everything needed for government communications.

The name "Noto" comes from "No Tofu" — referring to the blank rectangles (□) that appear when a font doesn't support a character. Noto aims to eliminate these by supporting every character in the Unicode standard.

Installation Preference

Important: We strongly prefer that you install Noto fonts locally on your system rather than loading them from Google's CDN.

Why local installation over CDN?

Local InstallationGoogle CDN
✓ No external requests — better privacy✗ Sends user data to Google servers
✓ Faster initial page loads✗ Additional DNS lookup and connection
✓ Works offline and on internal networks✗ Requires internet connection
✓ Full control over font versions✗ Google may update fonts unexpectedly
✓ GDPR/privacy compliance✗ May require cookie consent notices
✓ No third-party dependencies✗ Relies on Google infrastructure

How to install locally

  1. Download the font files using the links below
  2. Extract the ZIP file to access the .ttf or .otf files
  3. Place fonts in your project's /public/fonts/ or /assets/fonts/ directory
  4. Reference them in your CSS using @font-face declarations
/* Example @font-face declaration */
@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/NotoSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/NotoSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Apply to your site */
body {
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Font Downloads

Download the Noto fonts directly from Google Fonts. Each download includes all available weights and styles.

Noto Sans

Primary typeface for headings and body text

Weights: Regular (400), Medium (500), SemiBold (600), Bold (700)

Styles: Normal, Italic

Usage: All UI text, headings, paragraphs, buttons, labels

Noto Serif

Serif typeface for formal documents and special content

Weights: Regular (400), Medium (500), SemiBold (600), Bold (700)

Styles: Normal, Italic

Usage: Legal documents, certificates, formal notices, pull quotes

Noto Sans Mono

Monospace typeface for code and technical content

Weights: Regular (400), Medium (500), Bold (700)

Styles: Normal

Usage: Code snippets, reference numbers, technical data, terminal output

Google Noto Collection

For additional language-specific Noto fonts or to explore the full Noto family:

Font Samples

Noto Sans

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Regular 400

Medium 500

SemiBold 600

Bold 700

Regular Italic

Bold Italic

Noto Serif

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Regular 400

Medium 500

SemiBold 600

Bold 700

Regular Italic

Bold Italic

Noto Sans Mono

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

function verifyDocument(code: string): boolean {
  const pattern = /^[A-Z0-9]{6}$/;
  return pattern.test(code);
}

Multilingual Samples

Noto fonts support a vast range of languages and scripts. Here are some examples:

LanguageSample Text
EnglishThe quick brown fox jumps over the lazy dog
SpanishEl veloz murciélago hindú comía feliz cardillo y kiwi
GermanZwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich
FrenchPortez ce vieux whisky au juge blond qui fume
GreekΞεσκεπάζω τὴν ψυχοφθόρα βδελυγμία
RussianСъешь же ещё этих мягких французских булок
Japaneseいろはにほへとちりぬるを
Chinese天地玄黃宇宙洪荒
Korean키스의 고유 조건은 입술끼리 , 마, 주
Arabicنص حكيم له سر قاطع وذو شأن عظيم

CSS Variables

Use these CSS custom properties to reference fonts consistently across your project:

/* Font Families */
--font-heading: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
--font-mono: 'Noto Sans Mono', 'SF Mono', 'Consolas', monospace;

/* Font Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;

Using with Next.js

Next.js provides built-in support for Google Fonts with automatic optimisation:

// app/layout.tsx
import { Noto_Sans, Noto_Serif, Noto_Sans_Mono } from 'next/font/google';

const notoSans = Noto_Sans({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  variable: '--font-noto-sans',
  display: 'swap',
});

const notoSerif = Noto_Serif({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  variable: '--font-noto-serif',
  display: 'swap',
});

const notoMono = Noto_Sans_Mono({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
  variable: '--font-noto-mono',
  display: 'swap',
});

export default function RootLayout({ children }) {
  return (
    <html className={`${notoSans.variable} ${notoSerif.variable} ${notoMono.variable}`}>
      <body>{children}</body>
    </html>
  );
}

Note: Next.js automatically downloads and self-hosts the fonts at build time, avoiding runtime requests to Google's CDN while still benefiting from their optimisation.

Related