Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
mjml-head-font
Advanced tools
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.
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>
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.
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.
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 |
FAQs
mjml-head-font
The npm package mjml-head-font receives a total of 491,020 weekly downloads. As such, mjml-head-font popularity was classified as popular.
We found that mjml-head-font demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.