5

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$
      }
Improve this question
3
  • 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 ♦
    Commented Sep 14, 2017 at 8:30
  • Did you make any progress on this question? I would be interested as well!
    – Phil_B
    Commented Oct 5, 2017 at 8:59
  • 2
    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
    Commented Jun 25, 2019 at 4:57

2 Answers 2

Reset to default
6

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.

Improve this answer
3
  • 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
    Commented Oct 30, 2017 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
    Commented Nov 2, 2017 at 9:00
  • 2
    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
    Commented Dec 31, 2018 at 22:48
3

I answered this the other day when I was looking at adding the Trebuchet MS font and came across a question on adding Google Fonts (see Import Google fonts in Mosaico)

I'm using the latest Mosaico (2.9.1645644008) and my versafix-1 template looked a little different. The changes I made were basically the same as above but without using @font-face:

  1. Make a copy (if you want to, I did!) of the existing versafix-1 template
  2. Add the @import link from Google's font pages (Google Fonts)
  3. Add the additonal font/s to the @supports -ko-blockdefs section

Re 1. I did not use an extension, just added a directory called mosaico_tpl. The correct directory name is defined in the Mosaico Settings: Administer > CiviMail > Mosaico Settings. The default is [civicrm.files]/mosaico_tpl. I copied the entire versafix-1 directory and subdirectories to mosaico_tpl. This gave me the template, template-versafix-1.html, along with the edres and img resource directories. I just renamed the the directory and template file to suit.

Here is copy of the section of the template html files I edited:

    <!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">[subject]</title>
  
  <style type="text/css">
    @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); 
    @import url('https://fonts.googleapis.com/css2?family=Pontano+Sans&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300&display=swap');
    @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: Police; widget: select; options: Trebuchet MS, Helvetica, sans-serif=Trebuchet MS|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|Nunito, sans-serif=Nunito|Pontano sans, sans-serif=Pontano Sans|Times New Roman, Times, serif=Times New Roman|Verdana, Geneva, sans-serif=Verdana|Cormorant SC}
      decoration { label: Decoration; widget: select; options: none=None|underline=Underline }
      linksColor { label: Link Color; extend: color }

I had no need to import Trebuchet MS, but you will see that I imported 3 google fonts - Nunito, Pontano and Cormorant SC.

In the face {... block, each typeface is seperated by a | character and you define your fallback as the second parameter - typeface, fallback e.g. Trebuchet MS, Helvetica, sans-serif=Trebuchet MS. In this example from above, Helvetica is the fallback. The | character then ends that typeface and the next one is defined.

As I quickly learned, you MUST clear your caches, I did both Drupal and CiviCRM to see the changes, but all worked first time for me on Drupal 7.9, CiviCRM 5.50.1.

As a complete aside I came across this today for when I'm feeling adventurous and brave enough to start doing more with these templates:

Adding a custom block to Mosaico email editor in CiviCRM

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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