vue-email / vue-email

💌 Write email templates with vue
https://vuemail.net
MIT License
744 stars 32 forks source link

Rendering external woff2 fonts #156

Closed hsb-tonmoy closed 4 months ago

hsb-tonmoy commented 4 months ago

I'm trying to use Google fonts using the EFont component:

<EHead>
      <EFont
        font-family="Manrope"
        fallback-font-family="Arial"
        :web-font="{
          url: 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap',
          format: 'woff2',
        }"
        font-weight="400"
        font-style="normal"
      />
</EHead>

The rendered output looks like this:

<style>
      @font-face {
        font-family: &quot;
        Manrope&quot;
        ;
        font-style: normal;
        font-weight: 400;
        mso-font-alt: &quot;
        Arial&quot;
        ;
        src: url(https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&amp;display=swap) format(&quot; woff2&quot; );
      }

      * {
        font-family: &quot;
        Manrope&quot;
        ,
        Arial;
      }
</style>

I'm not sure where the " are coming from and referencing the font-family as such font-family:Manrope, Arial, sans-serif; throughout the template doesn't really work. It always falls back to Arial.

Flowko commented 4 months ago

sorry about the late response, will take care of it

Flowko commented 4 months ago

available in the latest version of the packages!