Answers.Body: <p>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 <a href="https://civicrm.stackexchange.com/a/42282/6361">Import Google fonts in Mosaico</a>)</p>
  <p>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:</p>
  <ol>
  <li>Make a copy (if you want to, I did!) of the existing versafix-1 template</li>
  <li>Add the @import link from Google's font pages (<a href="https://fonts.google.com/" rel="nofollow noreferrer">Google Fonts</a>)</li>
  <li>Add the additonal font/s to the @supports -ko-blockdefs section</li>
  </ol>
  <p>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 &gt; CiviMail &gt; 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.</p>
  <p>Here is copy of the section of the template html files I edited:</p>
  <pre><code>    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0&quot; /&gt;
    &lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot; /&gt;
    &lt;title style=&quot;-ko-bind-text: @titleText&quot;&gt;[subject]&lt;/title&gt;
    
    &lt;style type=&quot;text/css&quot;&gt;
      @import url('https://fonts.googleapis.com/css2?family=Nunito&amp;display=swap'); 
      @import url('https://fonts.googleapis.com/css2?family=Pontano+Sans&amp;display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300&amp;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 }
  </code></pre>
  <p>I had no need to import Trebuchet MS, but you will see that I imported 3 google fonts - Nunito, Pontano and Cormorant SC.</p>
  <p>In the face {... block, each typeface is seperated by a | character and you define your fallback as the second parameter -  <em>typeface</em>, <em>fallback</em> 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.</p>
  <p>As I quickly learned, you <strong>MUST</strong> 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.</p>
  <p>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:</p>
  <p><a href="https://artfulrobot.uk/blog/adding-custom-block-mosaico-email-editor-civicrm#comment-4252" rel="nofollow noreferrer">Adding a custom block to Mosaico email editor in CiviCRM</a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-07-14T14:10:00.977Z
Answers.LastActivityDate: 2022-07-14T14:10:00.977Z
Answers.UserDisplayName: ChumKui
Answers.Body: <p>What worked for me with google-fonts is the following:</p>
  
  <p>After the  tag add the include path generated from google-fonts, in this example Modak and Open Sans.</p>
  
  <pre><code>  @import url('https://fonts.googleapis.com/css?family=Modak|Open+Sans');
  </code></pre>
  
  <p>Then in the @supports block, in the face part add the fonts separated by '|', to be included in the blocks:</p>
  
  <pre><code>  face { label: Font; widget: select; options: Arial|Impact|'Open Sans', sans-serif|Times New Roman|'Modak'}
  </code></pre>
  
  <p>Edit: local fonts can be included by putting them on accessible on your server, and then import them in the template like this: </p>
  
  <pre><code>@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');
          }
  </code></pre>
  
  <p>Then add those to the dropdown menu in the @supports block same as above.</p>
  
  <p>That way your fonts can be loaded from your server.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-10-30T23:35:40.590Z
Answers.Text: 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.
Answers.UserDisplayName: Marko
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-02T09:00:20.977Z
Answers.Text: yeah, that's always a good idea when handeling JS, and happened to me as well a couple of times! :|
Answers.UserDisplayName: Phil_B
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-31T22:48:31.353Z
Answers.Text: Whilst not specific to Mosaico this guide to the use of web fonts by Litmus is very informative: https://litmus.com/blog/the-ultimate-guide-to-web-fonts
Answers.UserDisplayName: Graham
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-10-09T16:19:50.663Z
Answers.LastActivityDate: 2017-10-10T16:40:56.000Z
Answers.LastEditDate: 2017-10-10T16:40:56.000Z
Answers.UserDisplayName: Phil_B
Body: <p>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?</p>
  
  <p>There is the answer to my question on <a href="https://github.com/voidlabs/mosaico/issues/267" rel="nofollow noreferrer">github</a> and it goes like this:</p>
  
  <blockquote>
    <p>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):</p>
  
  <pre><code>&lt;!--[if !mso]&gt;&lt;!-- --&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Your+Web+Font" rel="stylesheet" type="text/css" /&gt;
  &lt;!--&lt;![endif]--&gt;
  </code></pre>
    
    <p>In the @supports -ko-blockdefs section of your template you add your
    font to the select box:</p>
  
  <pre><code>  face { label: Font; widget: select; options: Your Web Font, Fallback, serif=Your Web Font|Arial, Helvetica, sans-serif=Arial|Arial
  </code></pre>
    
    <p>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}</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>Here's the begining of versafix-1 template I eddited</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;meta name="viewport" content="initial-scale=1.0" /&gt;
    &lt;meta name="format-detection" content="telephone=no" /&gt;
    &lt;title style="-ko-bind-text: @titleText"&gt;TITLE&lt;/title&gt;
    &lt;!--[if !mso]&gt;&lt;!-- --&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" /&gt;
    &lt;!--&lt;![endif]--&gt;
    &lt;style type="text/css"&gt;
      @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$
        }
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-09-14T08:30:54.050Z
Comments.Text: 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
Comments.UserDisplayName: petednz - fuzion
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-10-05T08:59:03.730Z
Comments.Text: Did you make any progress on this question? I would be interested as well!
Comments.UserDisplayName: Phil_B
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-06-25T04:57:40.070Z
Comments.Text: 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.
Comments.UserDisplayName: Lars SG
Tags: <message-templates><mailing><civicrm-home><mosaico>
Title: Adding custom fonts in mosaico
ThreadText: # Adding custom fonts in mosaico
  
  (Asked by: username_0 on 2017-09-12)
  
  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):
  
  
  
  
  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
  
  
  
    
    
    
    TITLE
  
  **Tags:** message-templates, mailing, civicrm-home, mosaico
  
  > **Comments:**
  > **username_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  
  > **username_2**: Did you make any progress on this question? I would be interested as well!  
  > **username_3**: 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.  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_2 on 2017-10-09. Score: 6 | Accepted answer
  
  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.
  
  > **Comments:**
  > **username_0**: 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.  
  > **username_2**: yeah, that's always a good idea when handeling JS, and happened to me as well a couple of times! :|  
  > **username_5**: Whilst not specific to Mosaico this guide to the use of web fonts by Litmus is very informative: https://litmus.com/blog/the-ultimate-guide-to-web-fonts  
  
  ---
  
  ### Answer by username_4 on 2022-07-14. Score: 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:
  
  Make a copy (if you want to, I did!) of the existing versafix-1 template
  Add the @import link from Google's font pages (Google Fonts)
  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:
      
  
  
    
    
    
    [subject]
  
  
  ---
  
  