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

# Font

> A Vue Font component to set your fonts.

## Install

Install component from your command line.

```sh npm theme={null}
npm install @vuemaildev/vuemail -E
```

```sh yarn theme={null}
yarn add @vuemaildev/vuemail -E
```

```sh pnpm theme={null}
pnpm add @vuemaildev/vuemail -E
```

## Getting started

Add the component to your email template. This applies your font to all tags inside your email.
Note, that not all email clients supports web fonts, this is why it is important to configure your `fallback-font-family`.
To view all email clients that supports web fonts [see](https://www.caniemail.com/features/css-at-font-face/)

```vue theme={null}
<script setup lang="ts">
import { Font, Head, Html } from '@vuemaildev/vuemail';
</script>

<template>
  <Html lang="en">
    <Head>
      <Font
        font-family="Roboto"
        fallback-font-family="Verdana"
        :web-font="{
          url: 'https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2',
          format: 'woff2',
        }"
        :font-weight="400"
        font-style="normal"
      />
    </Head>
  </Html>
</template>
```

## Props

**font-family** `string` *required*

The font family you want to use. If the web-font property is configured, this
should contain the name of that font

**fallback-font-family** `string | string[]` *required*

The fallback font family the system should you, if web fonts are not supported
or the chosen font is not installed on the system. An array lists them in order of priority.

**web-font** `\{url: string, format: string\} | undefined`

The webFont the supported email client should use

**font-weight** `number | string` (default: 400)

The weight of the font

**font-style** `string` (default: normal)

The style of the font

## Support

All components were tested using the most popular email clients.

![Gmail](https://vuemail.dev/static/icons/gmail.svg)

Gmail

![Apple Mail](https://vuemail.dev/static/icons/apple-mail.svg)

Apple Mail

![Outlook](https://vuemail.dev/static/icons/outlook.svg)

Outlook

![Yahoo! Mail](https://vuemail.dev/static/icons/yahoo-mail.svg)

Yahoo! Mail

![HEY](https://vuemail.dev/static/icons/hey.svg)

HEY

![Superhuman](https://vuemail.dev/static/icons/superhuman.svg)

Superhuman


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.