Components
Font
A Vue Font component to set your fonts.
Install
Install component from your command line.
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/font
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 fallbackFontFamily. To view all email clients that supports web fonts see
<script setup lang="ts">
import { Font, Head, Html } from "@vue-email/components";
</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
fontFamily
string
The font family you want to use. If the webFont property is configured, this should contain the name of that font
fallbackFontFamily
string
The fallback font family the system should use if web fonts are not supported or the chosen font is not installed on the system.
webFont
{url: string, format: string} | undefined
The webFont the supported email client should use
fontWeight
number | string
The weight of the font
fontStyle
string
The style of the font