<h1>Cross-browser text stroke using SVG</h1>
<p>This is how browsers with SVG support will see it:</p>
<h1 class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="640" height="72" viewBox="0 0 640 72">
    <text x="0" y="64">Stroke of Genius</text>
  </svg>
</h1>
<p>This is how older browsers will see it:</p>
<!-- Note you can use the same code as before, I just removed the SVG parts to simulate the effect of not supporting SVG -->
<h1 class="stroke">Stroke of Genius</h1>

.stroke {
  margin: 0;
  font: 400 4.5em/1 'Alfa Slab One', serif;
  
  svg {
    display: block;
  }
  
  text {
    fill: none;
    stroke: currentcolor;
    stroke-width: 4;
  }
}

html {
  margin: 0.75em;
  color: #544a4c;;
  font: 400 1em/1.5 'Open Sans', sans-serif;
}

h1 {
  margin: 0 0 0.5em;
  font-size: 2em;
  font-weight: 700;
  line-height: 1;
}

p {
  margin: 1.5em 0;
}