Load font from local file to SVG

Question

I have a svg which use some font like this :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 375 169" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <defs>
            <style>
                @font-face {
                    font-family: 'Hopscotch';
                    src: url('Hopscotch.ttf') format('truetype');
                }
                .R {
                    font-family:'Hopscotch';
                    font-size:63.176px;
                    fill:rgb(191,191,190);
                }
                .U {
                    font-family:'Hopscotch';
                    font-size:46.254px;
                    fill:rgb(191,191,190);
                }
            </style>
            <image id="_Image2" width="36px" height="45px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAtCAYAAADGD8lQAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEHUlEQVRYhe2YTUxcVRiGn3Pnzr3zAzEgBQOCyFADDDEuSiFsbFygjTHaatWYJlqJJlLNgMYadaF0UdloG5UY0tZQTJr6gyktNsakiemildJVbVMqpUBogRqYHxxmhoGZ4wKhguDM3EtwTPomd3Nyznef+e53vvOeEZjQxtK75MlvZpOe37LfRvtXXrF83Om0k5+fR35+Hmp2lsMwUO4GC4LkgXKyBSu9Lzgdpb9/iP7+IYT/htMw0FopGFRoOWCj7bAvPYAW9NJrjvQCGhtXUf5riL/rnrxYegEBd4ASKu2A1EQTQiGF1oM653olo2MxFAXcZRZqqkJse0KQnfWPxmtKq277a9dVPthn5fTPASKRWTIznei6RiQyQzAYAkDTBE8+bqWxwYK73HyypRQrA536Sad+d5BwOEpGhhMpJdPToVUDWa2C1k80nt2WMOGJgQ61Zi8ZvHTFwmdfeInFYuTkZOH1BojH40kFfNujyTdftyINEwlWLABVVcnJyWZ8/PeUYza/r8nnnjaWqXgMRE31XxmS0NPrQ0rJrl0v0t7egZSp/1abTcjTJ23k5aZe7PE4qD92zgBwuMPGL+cltbU1uFwuQzAAkYgUJ07N8e5bWsprpRS3+9ChjhgAzc176eu7aghmQUeOxojFjK1dBLo2EERRFMrL3QwPD5sCGr8Vp38guY2wItDNMQuzs3NUVJRjtzvw+XymgACGR4x9cgXgytX5XVFVtck0yIJGbpjI0Mx8XWO3G/fXyzWbvNVeorQ7XP8fQLqurzfHohQAp3N+R0Sj88VUVFRoOrDdbsyWKAA1VbMoirLYEDdvrjYNVFlhrBoUAJsuyd3g4OLFXwGoq3vUFIzFYhIIoNSlMzU1xYUL5ykuLmHr1scMA210WbAZLENRtWn+tB8ZiTJ+K8iWLQ/T2XmcwcEBamtriUajKQd99WWr3OOxprxOSoFldDTM6GiY4PT8i4eGhnG7y6iurqWkpJju7u6UgmZmCrn/Iw1NF8QlKT0yLlCPtN29GOzmmODDfX7q61/h2LEMtm/fQSQSweNpTMo1KorgQItGUaHB9raSp+76wUb9bj9CKDQ1eWhoeIOBgX48Hg+XLl1eNZYQ0PapbspXr2ryv/7eRuOePwhHomRlZbFz5wtUVlYyOTlBV9cJenp6l8xXLYLPP9Z4/pk1MPmrXYMCAcF7e+18d9zPzMzSk9LptONw6AQCAXY8pfJOk5WiQvP3s38FWpDXp3D0W53LfXB9MM7cHDxQqvDQg1D3SJT77zNoDY0CraeWeOp00R2gREoroAmvLb2Azpy7N/H/Q+uhUFjlbG8+Z84WoE5MGrwzG1Dblw4Otk/f7qACNM2Ky1VMQUERiqKgzq1dX0sor1/iD4SXjYYJBn/D7w/hdpfxJ2joi9tNeajAAAAAAElFTkSuQmCC"/>
    </defs>
    <g id="Plan-de-travail1" serif:id="Plan de travail1" transform="matrix(1.8735,0,0,0.8415,0,0)">
        <rect x="0" y="0" width="200" height="200" style="fill:none;"/>
        <clipPath id="_clip1">
            <rect x="0" y="0" width="200" height="200"/>
        </clipPath>
        <g clip-path="url(#_clip1)">
            <g transform="matrix(0.53376,0,0,1.18835,0,-626.704)">
                <rect x="0" y="527.371" width="374.704" height="168.332" style="fill:rgb(81,81,70);"/>
            </g>
            <g transform="matrix(0.53376,0,0,1.18835,165.61,200.037)">
                <path d="M0,-168.332L-177.05,-116.492L-176.919,-92.531L4.236,0L64.435,0L64.435,-168.332L0,-168.332Z" style="fill:rgb(86,86,79);fill-rule:nonzero;"/>
            </g>
            <g transform="matrix(0.594954,-0.0231214,0.0103852,1.32459,-10.8795,-4.77331)">
                <text x="176.881px" y="82.794px" class="R">R</text>
            </g>
            ...

The font gets loaded correctly in Chrome but not in FireFox and safari. Do you have any idea what is the name of the functionality that support this and how to find an alternative for browser that doesn't support it?

There is no error displayed in the browser, seems like it just doesn't see the @font-facetag.

There is no request blocked due to cross-origin restrictions.

Load font from local file to SVG

0 Answers0