Mjml: How to remove @import declaration for font if I don't need it

Created on 3 May 2016  路  11Comments  路  Source: mjmlio/mjml

I don't want to
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
to be in my compilated file.

Is this a way to solve it?

Discussion

Most helpful comment

ok though why MJML creators want to use a custom font as a default font for some component, why not system fonts?

All 11 comments

Hello @limiterCore

There's a font importer that should doing this job for you ( see https://github.com/mjmlio/mjml/blob/ca544a4cc42a11e1d8a00d3e232f5a68bbf52406/packages/mjml-core/src/helpers/getFontsImports.js )

Note that Ubuntu is a default font for many MJML element, you may need to set a custom font-family without Ubuntu.

Thx for the answer, @iRyusa , but I have not understood.

I use Verdana font in my current project, I set it with font-family everywhere it needs.
And now I don't want to use and import an external font (Ubuntu in this case)

As I understand I need to go to mjml.core files and change it? If so, can you help me to find it, if I'm using a gulp-mjml.

Thank you!

Can you provide your MJML ? It looks like you miss one of them, it's a regexp that scan the mjml, so you have nothing to do.

Hi !

Try this : https://mjml.io/try-it-live/78d82741133bcb2b7e4c98bbfb9c5e2d, i add font-family="Verdana, sans-serif" on mj-text and mj-list without font-family

@lohek, thank you so much :) Now I'm totally understand what should I do to remove any external font imports: set font-family to all components that have it's default value as 'Ubuntu...'

Yup, by default mj-text, mj-list and mj-button have Ubuntu, Helvetica, Arial, sans-serif for default font-family, so you need change all mj-text, mj-list and mj-button with other font for remove Ubuntu import !

ok though why MJML creators want to use a custom font as a default font for some component, why not system fonts?

For my case mjml-table also have Ubuntu

You may want to go on with mj-head > mj-attributes > mj-all > font-family attribute instead of defining all the occuring element types (;

this should work !

   <mj-head>
     <mj-attributes>
       <mj-all font-family="Helvetica Neue" />
     </mj-attributes>
   </mj-head>
Was this page helpful?
0 / 5 - 0 ratings