Firefox doesn't respect font-size in SVG text

Question

I am running into an issue where Firefox doesn't seem to apply the font-size property (set in CSS) to SVG text elements.

The example below is enough to reproduce the issue on Firefox:

    <svg width="40em" height="25em" viewBox="0 0 40 25">
        <style type="text/css"><![CDATA[
            text { font-size: 1px; }
            text.foo { font-size: 2px; }
        ]]></style>
        <text x="0" y="10" class="foo">Hello, world! foo</text>
        <text x="0" y="20">Hello, world! bar</text>
    </svg>

Here is the expected result (Chromium):

Here is what Firefox renders:

I can't find what I am doing wrong. Any ideas? Thanks.

Answer 1

You likely have a minimum font size set. This is a known bug, hopefully we'll fix it someday.

Unset it like this.