Import Google fonts in Mosaico

Question

I've followed some posts found here and there but wasn't able to make that work on Mosaico 2.8. Here is what I've added to versafix template.

Have missed something obvious?

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap'); @import url('https://fonts.googleapis.com/css?family=Pontano+Sans&display=swap');

face { label: Police; widget: select; options: 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}

Answer 1

Did you clear all your caches?

I just tried this and it worked for me using your code example. I copied the @import lines before the @supports -ko-blockdefs section and then your font select options afterwards:

...
<style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Nunito&display=swap'); 
    @import url('https://fonts.googleapis.com/css?family=Pontano+Sans&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: 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}
      decoration { label: Decoration; widget: select; options: none=None|underline=Underline }
      linksColor { label: Link Color; extend: color }
...

I did this, cleared both the Drupal and the CiviCRM cache and all was fine?