0

Monaco-editor uses codicon.ttf font for some icons:

@font-face {
    font-family: "codicon";
    src: url(./codicon.ttf) format("truetype");
}

Unfortunately, this path is not configurable and it leads to 404 error in my case.

I've created an application/library where monaco-editor is integrated. Everything is bundled by Webpack and my-app.bundle.js is hosted on remote server: https://server.com/my-app.bundle.js + https://server.com/resources/codicon.ttf

When someone uses my library and includes it in own HTML page (<script src="https://server.com/my-app.bundle.js"></script>) the library tries to access codicon.ttf on local machine: http://localhost:8080/codicon.ttf but actually it has to be loaded from remote server: https://server.com/resources/codicon.ttf

I'm trying to find some way how to solve this problem. I thought about:

  1. Set absolute path https://server.com/resources/codicon.ttf instead of relative using Webpack. I didn't find how it can be done.
  2. Place codicon.ttf into bundle my-app.bundle.js. Looks like it is possible (How to inline fonts in CSS with webpack?), however requires changing of 3rd party css (css in monaco-editor).
  3. Somehow override monaco-editor css and set absolute path there. Not sure about it.

Is any of my ideas correct? Perhaps this is a problem of monaco-editor and has to be fixed on their side?

vich
  • 262
  • 2
  • 15

2 Answers2

0

I've found 2 ways how the problem can be solved.

  1. Set absolute path to font using Webpack
{
    test: /codicon\.ttf$/,
    use: [{
        loader: "file-loader",
        options: {
            name: "[name].[ext]",
            publicPath: "https://server.com/resources"
        }
    }]
}
  1. Override css style of monaco-editor

Add the following style in css file of the application (not in 3rd party stylesheet file):

@font-face {
    font-family: 'codicon';
    src: url('https://server.com/resources/codicon.ttf') format('truetype');
}

And add the following rule to Webpack config to avoid loading font file from monaco-editor css file:

{
    test: /codicon\.ttf$/,
    use: [{
        loader: "ignore-loader"
    }]
}
vich
  • 262
  • 2
  • 15
  • I'm curious why you actually want to load the codicon font. Monaco already includes it and you can use it in your code. – Mike Lischke Nov 05 '20 at 08:12
  • Yes, Monaco includes it. However, when you develop your application as 3rd party library (JS bundle where Monaco exists and resources with codicon font) and allow it to be used from CDN it tries to load codicon font from client and not from CDN. So it's necessary to bundle the library in the way where codicon.ttf is loaded remotely and not just "./codicon.ttf" path. – vich Nov 05 '20 at 09:13
0

this worked for me

{
            test: /\.ttf$/,
            use: [{loader:'file-loader',
            options: {
                publicPath: "/absolute_path"
            }}]
        
        }
Sahil Mahna
  • 1
  • 1