---
title: Noto Sans
description: Category: Sans-Serif · Key: noto-sans · Weights: 400, 500, 600, 700
visibility: guest
draft: false
---

# Noto Sans

**Category:** Sans-Serif · **Key:** `noto-sans` · **Weights:** 400, 500, 600, 700

<a href="https://fonts.google.com/specimen/Noto+Sans" target="_blank" rel="noopener noreferrer">View on Google Fonts <span aria-hidden="true">↗</span><span class="sr-only">(opens in new tab)</span></a>

---

## Specimen

<link rel="stylesheet" href="/vendor/wirekit/fonts/sans/noto-sans/noto-sans.css">

<div style="font-family: 'Noto Sans', sans-serif; margin-bottom: 2rem;">
<p style="font-size: 2.5rem; font-weight: 400; line-height: 1.3; margin: 0; color: var(--color-wk-text);">
Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world.
</p>
</div>

## Styles

<div style="border-bottom: 1px solid var(--color-wk-border-subtle); padding: 1.5rem 0;">
<p style="font-size: 0.875rem; color: var(--color-wk-text-muted); margin: 0 0 0.5rem;">Regular 400</p>
<p style="font-size: 2rem; font-weight: 400; line-height: 1.3; margin: 0; color: var(--color-wk-text); font-family: 'Noto Sans', sans-serif;">The quick brown fox jumps over the lazy dog</p>
</div>
<div style="border-bottom: 1px solid var(--color-wk-border-subtle); padding: 1.5rem 0;">
<p style="font-size: 0.875rem; color: var(--color-wk-text-muted); margin: 0 0 0.5rem;">Medium 500</p>
<p style="font-size: 2rem; font-weight: 500; line-height: 1.3; margin: 0; color: var(--color-wk-text); font-family: 'Noto Sans', sans-serif;">The quick brown fox jumps over the lazy dog</p>
</div>
<div style="border-bottom: 1px solid var(--color-wk-border-subtle); padding: 1.5rem 0;">
<p style="font-size: 0.875rem; color: var(--color-wk-text-muted); margin: 0 0 0.5rem;">SemiBold 600</p>
<p style="font-size: 2rem; font-weight: 600; line-height: 1.3; margin: 0; color: var(--color-wk-text); font-family: 'Noto Sans', sans-serif;">The quick brown fox jumps over the lazy dog</p>
</div>
<div style="border-bottom: 1px solid var(--color-wk-border-subtle); padding: 1.5rem 0;">
<p style="font-size: 0.875rem; color: var(--color-wk-text-muted); margin: 0 0 0.5rem;">Bold 700</p>
<p style="font-size: 2rem; font-weight: 700; line-height: 1.3; margin: 0; color: var(--color-wk-text); font-family: 'Noto Sans', sans-serif;">The quick brown fox jumps over the lazy dog</p>
</div>

## Usage

```php
// config/wirekit.php
'fonts' => [
    'sans' => 'noto-sans',
],
```

When configured, WireKit sets:

```css
--font-wk-sans: 'Noto Sans', sans-serif;
```

[← Back to Fonts Overview](/components/fonts)

## Design Tokens

See [Fonts — Design Tokens](/components/fonts#design-tokens) for the canonical typography variables (`--font-wk-sans`, `--font-wk-serif`, `--font-wk-mono`, plus weight + spacing tokens) every WireKit component reads.