mjml-head-font

What is mjml-head-font?

The mjml-head-font npm package is a component of the MJML framework that allows you to include custom fonts in your MJML email templates. This package helps you to easily integrate web fonts into your email designs, ensuring that your emails look consistent across different email clients.

What are mjml-head-font's main functionalities?

Include Google Fonts

This feature allows you to include Google Fonts in your MJML email templates. The code sample demonstrates how to add the Roboto font to your email and apply it to a text element.

<mjml>
  <mj-head>
    <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Roboto" />
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-family="Roboto, Arial, sans-serif">
          This is a text with Roboto font.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Include Custom Fonts

This feature allows you to include custom fonts hosted on your own server or a third-party server. The code sample demonstrates how to add a custom font to your email and apply it to a text element.

<mjml>
  <mj-head>
    <mj-font name="CustomFont" href="https://example.com/fonts/customfont.woff" />
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-family="CustomFont, Arial, sans-serif">
          This is a text with a custom font.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Other packages similar to mjml-head-font

mjml

The mjml package is the core MJML framework that allows you to create responsive email templates using a simple markup language. It includes various components for building email layouts, including the ability to add custom fonts through the mjml-head-font component. Compared to mjml-head-font, the mjml package provides a broader range of functionalities for email template creation.

mjml-head

The mjml-head package is a part of the MJML framework that includes various head components for email templates, such as mj-title, mj-preview, and mj-font. It allows you to define metadata and styles for your email templates. Compared to mjml-head-font, the mjml-head package offers a more comprehensive set of head components for email customization.

README

mj-font

This tag imports fonts. The tag has effect only if the template uses the font, too. The href attribute points to a hosted css file; that file contains a @font-face declaration. Example: https://fonts .googleapis.com/css?family=Raleway

<mjml>
  <mj-head>
    <mj-font name="Raleway"
      href="https://fonts.googleapis.com/css?family=Raleway" />
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-family="Raleway, Arial">
          Hello World!
        </mj-text>
      </mj-column>
     </mj-section>
  </mj-body>
</mjml>

attribute	unit	description	default value
href	string	URL of a hosted CSS file	n/a
name	string	name of the font	n/a