3

Basicly what it says in the title. How do I add custom fonts within mosaico templates, i.e. how do I make them selectable in the template design process?

There is the answer to my question on github and it goes like this:

In the header of the template (the mso comments are there because Outlook is able to read webfonts declaration but then "breaks" any declared font):

<!--[if !mso]><!-- -->
<link href="https://fonts.googleapis.com/css?family=Your+Web+Font" rel="stylesheet" type="text/css" />
<!--<![endif]-->

In the @supports -ko-blockdefs section of your template you add your font to the select box:

  face { label: Font; widget: select; options: Your Web Font, Fallback, serif=Your Web Font|Arial, Helvetica, sans-serif=Arial|Arial

Black, Arial Black, Gadget, sans-serif=Arial Black|Comic Sans MS, Comic Sans MS5, cursive=Comic Sans|Courier New, Courier New, monospace=Courier|Georgia, serif=Georgia|Impact, sans-serif=Impact|Lucida Console, Monaco, monospace=Lucida Console|Lucida Sans Unicode, Lucida Grande, sans-serif=Lucida Sans Unicode|Times New Roman, Times, serif=Times New Roman|Verdana, Geneva, sans-serif=Verdana}

However this doesn't work for me. When I add this to versafix-1 (mosaico/templates/versafix-1/template-versafix-1.html) I still don't have the font I specified.

Here's the begining of versafix-1 template I eddited

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no" />
  <title style="-ko-bind-text: @titleText">TITLE</title>
  <!--[if !mso]><!-- -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
  <!--<![endif]-->
  <style type="text/css">
    @supports -ko-blockdefs {
      id { widget: id }
      size { label: Size; widget: select; options: 8|9|10|11|12|13|14|15|16|18|20|22|25|28|31; }
      visible { label: Visible?; widget: boolean }
      color { label: Color; widget: color }
      radius {
        label: Corner Radius;
        widget: integer;
        max: 20;
        help: Attention - this property is not supported on all email clients (i.e. Outlook)
      face { label: Font; widget: select; options: Open Sans, Arial, serif=Open Sans|Arial, Helvetica, sans-serif=Arial|Arial Black, Arial Black, Gadget, sans-serif=Ari$
      }
  • 1
    look fwd to the answer. we also had a question just recently from a client about changing line-spacing but haven't gotten round to digging on that yet – petednz - fuzion Sep 14 '17 at 8:30
  • Did you make any progress on this question? I would be interested as well! – Phil_B Oct 5 '17 at 8:59
  • 1
    A long time ago now, but if anyone is looking in the future: simply change the options for lineHeight in the versafix template. It looks like this: lineHeight { label: Line Height; widget: select; options: normal=Normal|150%=1.5 Lines|200%=Double; }, changing those percentages will change the options. – Lars SG Jun 25 at 4:57
3

What worked for me with google-fonts is the following:

After the tag add the include path generated from google-fonts, in this example Modak and Open Sans.

  @import url('https://fonts.googleapis.com/css?family=Modak|Open+Sans');

Then in the @supports block, in the face part add the fonts separated by '|', to be included in the blocks:

  face { label: Font; widget: select; options: Arial|Impact|'Open Sans', sans-serif|Times New Roman|'Modak'}

Edit: local fonts can be included by putting them on accessible on your server, and then import them in the template like this:

@font-face {
  font-family: 'your_font_name';
  src: url(https://example.com/files/fonts/your_font/your_font_file.ttf) format('ttf'), 
    url(https://example.com/files/fonts/your_font/your_font_file.woff2) format('woff2');
        }

Then add those to the dropdown menu in the @supports block same as above.

That way your fonts can be loaded from your server.

  • 1
    Clearing browser cache was also needed. This was the main cause of my troubles. Even when I had the right solution, I couldn't see it because of the cache. – Marko Oct 30 '17 at 23:35
  • yeah, that's always a good idea when handeling JS, and happened to me as well a couple of times! :| – Phil_B Nov 2 '17 at 9:00
  • 1
    Whilst not specific to Mosaico this guide to the use of web fonts by Litmus is very informative: litmus.com/blog/the-ultimate-guide-to-web-fonts – Graham Dec 31 '18 at 22:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.