Font

Install

Install component from your command line.

npm install @vuemaildev/vuemail -E

yarn add @vuemaildev/vuemail -E

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

<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

string

required

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

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.

{url: string, format: string} | undefined

The webFont the supported email client should use

number | string

default:"400"

The weight of the font

string

default:"normal"

The style of the font

Support

All components were tested using the most popular email clients.

Gmail

Apple Mail

Outlook

Yahoo! Mail

HEY

Superhuman

Overview

Getting Started

Guides

Components

Utilities

Integrations

Contributing

Install

Getting started

Props

Support

​Install

​Getting started

​Props

​Support

Install

Getting started

Props

Support