Why is my SVG text different sizes in Chrome and Firefox?

Question

As the title states, I have SVG text on a website I'm building, but there is a big discrepancy between how Chrome and Firefox display it. How can I get a more uniform size across browsers?

Here is how the site looks on Chrome...

...and here is how it looks on Firefox...

The HTML...

<h1 class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="540" height="72" viewBox="0 0 540 72">
     <text x="0" y="64">Entrepreneurs Associates</text>
  </svg>
</h1>

The CSS...

h1, h2, h3 {
  font-family: acre, Arial, sans-serif;
  font-weight: bold;
}

h1 {
  position: absolute;
  margin: 0 0 0 210px;
  font-variant: small-caps;
  font-size: 40pt;
}

.stroke text {
  fill: #fff;
  stroke: #141414;
  fill-opacity: 1;
  stroke-width: 2px;
  stroke-linecap: square;
  stroke-linejoin: round;
  stroke-opacity: 1;
}

The site can also be found here https://eanagaland.github.io/ (though this is a provisional address).