Buttondown logo

Custom emailsCustom archivesLocalizationCustom transactional emailsExternal scripts

FAQ

Do you have a CSS tutorial?Can I use a custom font?Can I link to a related email?Can I exclude certain emails from the archive?How can I hide the top of the Modern template?Can I center my email?Can I customize the Gmail icon?

Buttondown logo

Can I use a custom web font?

Yes, and no.

You can definitely use a web font to customize the experience of your web archives!

For your email design, many clients do not support web fonts. Using a custom webfont could cause your readers to have very different experiences based on their client.

Using fonts to customize your web presence

You can customize the web CSS in Buttondown's design settings to use a custom font for your newsletter archives.

For example, using the Montserrat font from Google Fonts:

@import url("https://fonts.googleapis.com/css?family=Montserrat");

* {
  font-family: "Montserrat", sans-serif;
}

Using web fonts in your email

With the caveat that many email clients do not support custom web fonts (the main ones that do support it are Apple Mail, Outlook for Mac, and HEY), it's actually fairly straightforward to specify a custom web font!

You'll need the @font-face declarations for your font. With Google Fonts, you can do this by taking the URL that Google provides you (e.g. https://fonts.googleapis.com/css?family=Montserrat), visiting that URL in your browser (e.g., this URL), and copying the entire resulting page into Buttondown's design settings for your newsletter:

/* cyrillic-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw0aXp-p7K4KLjztg.woff2)
    format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw9aXp-p7K4KLjztg.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw2aXp-p7K4KLjztg.woff2)
    format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw3aXp-p7K4KLjztg.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXp-p7K4KLg.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

Then, under that CSS in the same box in settings, you can add the following CSS to use the font:

/* @font-face declarations from above, etc... */

body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
a,
ol,
ul,
table,
tr,
td,
* {
  font-family: "Montserrat", sans-serif;
}

Related