Search code examples
svglessfont-facetidesdk

tideSDK + less.js + SVG font-face

I just started trying out the TideSDK to deploy a website to .exe and .app, which for the most part is fantastic.

The problem that I'm currently coming across is that all my CSS styles are written in .less styles utilizing the less.js framework. Inside of here, I have custom font-faces declared, and when deployed to a standard web browser, they apply fine to all the elements that use them.

When deployed through Tide, it doesn't seem to stick unless I take all my styling out of .less style sheets and put them back into regular .CSS files, which leads me to believe that there is some sort of compile time change that Tide is using internally when deployed the actual view of the application.

I have no idea how to go about fixing this. As a note, I'm not getting any 

[Error] Error finding

errors from the Tide console, which leads me to believe that the .svg's are being found, just not applied.

UPDATE:

It seems I was using wrong syntax in the src: url('...'), so the CSS in the .less file was actually failing silently. I'm getting a pretty strange [Error] Error finding... file for the .svg now. The URL that is inside this line of CSS is being prepended by app: 3 times.

Solution

  • After several hours of looking at this problem, I eventually have figured it out. Couple of things to note when you are using the combination of these frameworks:

    1. less.js spits out really odd path directories when using

      src: url('...');

      As a solution for this, you can use the import directive that is available to you in less and put the @font-face declarations inside of that .css style sheet. By importing a plain .css style sheet, you are telling less.js to treat it as regular .css, and the muxed url that gets spit out won't happen.

      @import "../css/style.css";

    2. After putting the import directive and confirming that the SVG was indeed being generated under Resources - Fonts in the Chrome inspector, I proceeded to take a look at the SVG file itself to determine if there was something wrong in the CSS naming conventions for the SVG file. According to this answer, and the blog post within it, your SVG name should be using:

      font-family

    value in the naming scheme from the SVG meta data

    src: url('YourSVGFont.svg#Silkscreen') format('svg');

    when in fact, you should be using the font id, at least that was the solution in my case:

    src: url('YourSVGFont.svg#slkscrb') format('svg');

    This is the image embedded in the blog post so that you can see what I'm talking about, and see where in the SVG meta data these two names are placed.