> ## Documentation Index
> Fetch the complete documentation index at: https://guides.a35hie.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Fonts

> My hosted webfont collection!

<Note>Link to the stylesheet using the CDN URL for the fonts below, then use the font name in your CSS.</Note>

## Example Implementation

Link to stylesheet in your HTML or CSS:

<CodeGroup>
  ```html icon="code" HTML theme={null}
  <link rel="stylesheet" href="https://fonts.a35hie.me/DTGetaiGroteskDisplay.css" type="text/css" />
  ```

  ```css icon="paintbrush" CSS theme={null}
  @import url("https://fonts.a35hie.me/DTGetaiGroteskDisplay.css");
  ```
</CodeGroup>

Then, use the font in CSS:

```css icon="paint-roller" focus={2} CSS Code theme={null}
body {
  font-family: "DT Getai Grotesk Display", monospace
}
```

***

## Font Families

<Card title="DT Getai Grotesk Display" icon="star" href="/themes/web/fonts">
  <mark className="featured">Featured</mark> SIL Open Font License 1.1

  ```css theme={null}
  https://fonts.a35hie.me/DTGetaiGroteskDisplay.css
  ```
</Card>

<Card title="LT Remark" icon="font" href="/themes/web/fonts">
  SIL Open Font License 1.1

  ```css theme={null}
  https://fonts.a35hie.me/LTRemark.css
  ```
</Card>

### PangramPangram

These fonts are for non-commercial use only.
To see more PangramPangram fonts and buy licenses, please go to [pangrampangram.com](https://pangrampangram.com)

<Card title="PP Pangaia" icon="sparkles" href="/themes/web/fonts">
  <mark>New!</mark> Non-commercial

  ```css theme={null}
  https://fonts.a35hie.me/PPPangaia.css
  ```
</Card>

<Card title="PP Neue Machina" icon="sparkles" href="/themes/web/fonts">
  <mark>New!</mark> Non-commercial

  ```css theme={null}
  https://fonts.a35hie.me/PPNeueMachina.css
  https://fonts.a35hie.me/PPNeueMachinaInktrap.css
  ```
</Card>

<Card title="PP Agrandir" icon="sparkles" href="/themes/web/fonts">
  <mark>New!</mark> Non-commercial

  ```css theme={null}
  https://fonts.a35hie.me/PPAgrandir.css
  https://fonts.a35hie.me/PPAgrandirGrand.css
  https://fonts.a35hie.me/PPAgrandirNarrow.css
  https://fonts.a35hie.me/PPAgrandirThin.css
  https://fonts.a35hie.me/PPAgrandirTight.css
  https://fonts.a35hie.me/PPAgrandirWide.css
  ```
</Card>

<Card title="PP Editorial New" icon="sparkles" href="/themes/web/fonts">
  Non-commercial

  ```css theme={null}
  https://fonts.a35hie.me/PPEditorialNew.css
  https://fonts.a35hie.me/PPEditorialNewItalic.css
  ```
</Card>

<Card title="PP Neue Montreal" icon="sparkles" href="/themes/web/fonts">
  Non-commercial

  ```css theme={null}
  https://fonts.a35hie.me/PPNeueMontreal.css
  https://fonts.a35hie.me/PPNeueMontrealMono.css
  https://fonts.a35hie.me/PPNeueMontrealVariable.css
  ```
</Card>

<Card title="PP Mori" icon="sparkles" href="/themes/web/fonts">
  Non-commercial

  ```css theme={null}
  https://fonts.a35hie.me/PPMori.css
  https://fonts.a35hie.me/PPMoriVariable.css
  ```
</Card>

<Card title="PP Right Grotesk" icon="sparkles" href="/themes/web/fonts">
  Non-commercial

  ```css theme={null}
  https://fonts.a35hie.me/PPRightGrotesk.css
  https://fonts.a35hie.me/PPRightGroteskCompact.css
  https://fonts.a35hie.me/PPRightGroteskText.css
  ```
</Card>

<Card title="PP Supply Mono" icon="sparkles" href="/themes/web/fonts">
  Non-commercial

  ```css theme={null}
  https://fonts.a35hie.me/PPSupplyMono.css
  ```
</Card>