I recently discovered that the &#x27;src&#x27; attribute of the @fontface directive supports the inline &#x27;data:&#x27; syntax (like you can do with images etc.).<p>So you can basically do this:<p><pre><code>  @fontface {
    ...
    src: url(&quot;data:font&#x2F;opentype;base64,&lt;base64-encoded-otf&#x2F;ttf-file&gt;&quot;);
  }
</code></pre>
Although this expands the payload size slightly, it does remove the need for another round trip to a server (so renders potentially faster), and also gives you full control over your embedded fonts.