Search code examples
cssurlflaskfont-facestatic-files

How to make font face URL in SCSS work with a different Flask application root

I have a website that uses Flask, and I use Flask-Assets with the libsass filter. Here is some of my SCSS code:

@font-face {
    font-family: AnakAnak;
    src: url("/static/anakanak.ttf");
}

This usually works fine. However, when I set the APPLICATION_ROOT config value of my Flask app to /otherpath, the font file is now at /otherpath/static/anakanak.ttf, but the CSS still points to /static/anakanak.ttf. How can I fix this? Is there some way I can insert something like this into the CSS?

src: url(url_for('static', filename='anakanak.ttf');
Solution

  • I just figured out a solution. Since the outputted CSS file is also going to be a static file (/static/gen/XXXXXXXX.css), just use a relative URL in the CSS file:

    src: url("../anakanak.ttf");