Font-Face and embedded icon fonts (Base64)

[fmotion1]

Hi all,

I have been working on my own custom theme and managed to get a custom icon font rendering using the following code:

@font-face {
   font-family: "mgz_icons" !important;
   src: local("mgz_icons"), url('data:@file/octet-stream;base64,d09GMgABAAAAABFEAAsAAAAAJmwAdzlh2wBAA=='),
        format("woff2") !important;
   font-weight: normal !important;
   font-style: normal !important;
   font-display: block !important;
}

[class^="icon-"],
[class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: "mgz_icons" !important;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.icon-apps:before              {  content: "\e817";  }
.icon-device-tablet:before     {  content: "\e886";  }
.icon-download-circle-o:before {  content: "\e8b9";  }
.icon-upload-circle-o:before   {  content: "\e8bc";  }
.icon-plus-square:before       {  content: "\e8cc";  }
.icon-minus-square:before      {  content: "\e8cd";  }
.icon-collapse:before          {  content: "\e8ef";  }
.icon-expand:before            {  content: "\e8f0";  }
.icon-plus-circle-o:before     {  content: "\e8f7";  }
.icon-redo:before              {  content: "\e905";  }
.icon-ban:before               {  content: "\e906";  }
.icon-calendar:before          {  content: "\e908";  }
.icon-chain-broken:before      {  content: "\e90c";  }
.icon-check-circle-o:before    {  content: "\e90d";  }
.icon-undo:before              {  content: "\e911";  }
.icon-cog:before               {  content: "\e916";  }
.icon-envelope:before          {  content: "\e91c";  }
.icon-info-circle:before       {  content: "\e926";  }
.icon-link:before              {  content: "\e927";  }
.icon-plus-circle:before       {  content: "\e92d";  }
.icon-zoom-in-bold:before      {  content: "\e92e";  }
.icon-close-circle:before      {  content: "\e93a";  }
.icon-trash-o:before           {  content: "\e93b";  }
.icon-help:before              {  content: "\e941";  }
.icon-help-o:before            {  content: "\e942";  }
.icon-zoom-out-bold:before     {  content: "\e943";  }
.icon-minus-circle:before      {  content: "\e946";  }
.icon-minus-circle-o:before    {  content: "\e947";  }
.icon-search-bold:before       {  content: "\e94a";  }
.icon-globe:before             {  content: "\e97b";  }
.icon-info:before              {  content: "\e98f";  }
.icon-warning-full:before      {  content: "\e9b5";  }
.icon-unread:before            {  content: "\e9ba";  }

But today for some reason I can't fathom, it just stopped working.

The glyphs just aren't rendering:

Do any of you know why this could happen? The font is literally embedded in the css file. Is there a more fool-proof way to use icon fonts in Joplin?

What gets me is that it was working perfectly before.

Any help greatly appreciated.

[laurent]

We disabled certain HTML features recently for security reasons, so maybe that's what happened (although I'm not seeing anything obvious in your code). You might want to check the devtools to see exactly how the Markdown is being rendered

[fmotion1]

Hey Laurent,

Thanks for the reply. Here are a couple screenshots from inspecting the page via devtools:

This seemingly shows that the icon font is live for the target span element. But then this makes no sense to me:

Look at the "Rendered Fonts" section. The glyphs are being rendered with Times New Roman instead of my icon font.

Does any of this correspond to the recent security updates that were made?