I have the following svg I need to render in as a standalone svg file:
<svg width="89" height="55" viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@font-face {
font-family: 'Press Start 2P';
src: url('https://fonts.googleapis.com/css?family=Press Start 2P');
}
</style>
<rect width="89" height="55" fill="black" />
<rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
<text text-anchor="middle" x="44.5" y="31" fill=" white" font-family="Press Start 2P" font-size="12" letter-spacing="0em">1234</text>
<rect x="78" y="45" width="9" height="8" fill="#FF4F0A" />
<rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
<path d="M81.4286 51V50.4286H81V49.8571H81.8571V50.4286H83.1429V49.2857H81.4286V48.7143H81V47.5714H81.4286V47H83.5714V47.5714H84V48.1429H83.1429V47.5714H81.8571V48.7143H83.5714V49.2857H84V50.4286H83.5714V51H81.4286Z" fill="#0000FF" />
</svg>
I am trying to use a given font (Press Start 2P) but it does not render, neither locally when I open the svg file nor with the following data uri
data:image/svg xml,
EDIT
After comment, I tried to embed the whole font but still does not work
<svg width="89" height="55" viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
@font-face {
font-family: "Press Start 2P";
src: url(data:application/font-woff;charset=utf-8;base64,..) format("woff");
font-weight:normal;font-style:normal;
}
</style>
</defs>
<rect width="89" height="55" fill="#E5E5E5" />
<rect width="89" height="55" fill="#29296E" />
<rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
<text text-anchor="middle" x="44.5" y="31" fill=" white" font-family="Press Start 2P" font-size="12">
{}azer
</text>
<rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
<rect x="47" y="45" width="41" height="8" fill="#FF4F0A" />
<text text-anchor="end" x="86" y="52" fill=" white" font-family="Press Start 2P" font-size="8" letter-spacing="0em">
{}
</text>
</svg>
the base64 comes from the base64 encoding of the .ttf file
CodePudding user response：
Your first example doesn't work since you're using a css URL as a font file URL.
Open your google font URL and copy the actual @font-face rule
The returned css depends on your current browser – yeah, user agent sniffing!
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/pressstart2p/v14/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');
}
Otherwise use a service like google web fonts helper to get the actual font file URLs.
False friends: css properties vs. svg attributes
Svg's font related attributes like font-family apparently don't work well with css style definitions.
Better apply font-family within the <style> element like so:
<svg viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/pressstart2p/v14/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');
}
text {
font-family: 'Press Start 2P';
font-size: 12;
}
</style>
</defs>
<rect width="89" height="55" fill="black" />
<rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
<text text-anchor="middle" x="44.5" y="31" fill=" white">1234</text>
<rect x="78" y="45" width="9" height="8" fill="#FF4F0A" />
<rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
</svg>Embedded fonts
Some services provide a way to generate/convert font files to base64 data URLs like transfonter
Embedded font example
<svg viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAArEABEAAAAAGKwAAApoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbIBwqBmAAPAiBYgmaFhEICoZUhjELFAABNgIkAxwEIAWHHAc5DIExG0gXUVSOEmRfHdjGpMb/gLJoF9epkcLpDaY/P 6klIrLppNn8p vs /cV 9VOUnL1Z8NoJpCeoz1eMv0AF7CK2Y1JM9Xt/d3z9Io40ROLNYmCSHhDv4fbd sKMHT3PAQyyC2Mli rQmSoJm1oqaop6tOBlfYHAPu6bFIK Ka/4WDvulPpaSICTugkwN 3Tuh4t8VyQ7c3i5jt63 f2u 9t3ZzUfVsqVtWZEGtBW6vjrZ ROYSXLoA7MiVGWhygr1R3QlUoCynlDpGlPbZWwCBj4icFbNR8VLAgEwAQAAA4FBBYEA6IgWi6prm7uhggPA/wAAoDUXJGBX5lqe2F5FuAlgei75cysEwK5n/QCaWmPSKLLyCgAC5UMJd1g1O2vwEmw57QdA8mfXBu4GAPbdaJJNCrGCtCaYBFrEkQA5kcBs89Ck2zJX Sj71vsIzr UDWoDd8A7aPYw0n7e o6XHeO/fqBVc8doP/9P2s/f939DEHhMkyxt/sPO7Sby/adETpOE13KmvucFpt1/ldZodmxHznvwCszGA5isxAABO50FGHQiXrqB 09DAm/Y5HiCHJNH0nzwOXnzru/v0n6TPM6rEwWd4oLXrMoyuhMShsWAFWIZMsMUvVROZ qvz13SXWVE2mKpd1ge5b0DJefsoJCzgZt0mnNAgiaCa3cihO0lhERkic77DKUAh3nzOqliGpU3Q t2vpuNVwJPk2OksReyqbf/fBxqxrLC/X4qe647yMmyz8K5T1BwHic/XEAAxe4NKKFE8mNXJJqAxA42PYNmUEKMAwqkiTDs B nqcBNwklZP1jGwRxLxaBskk3iXY87ac0ng1t3YWYKBgyuRZP bNYJVgE08SzDbuIgVA1JrRs73xfDqp9zNoBWZTLNyDymwdgox Sd XzXByxUVopM53HABShJmLYh2dqFEjPWAO5gVQ24ITzJ8dT1j9OsP5txWVE/3sUl0QIebL5Llc/H TrWwn4EArC5nzYPx/idz2hBGwaiYtfeO92NyaEccYcMDKaxmjKswaCKCUn3Uk24qnCN/fVdL2uNvUG553YQMVuN58tnTJthUZughXRqS pNWUGHNoYMnA3EnHsHgjBXUYrvEm6JmmBIRBd4iipQ/h2wP087dBX78f/AlcB1oXktB4JRcXgvEIJKLQpljMKYROGMUwQTFMlkimIKRTOVYpiWmgjDfFDktPkumRroc 44M5CkExqq/ yaHHpB/72hYzGHFeKGODjYcIiHwxk4nIXDOTich8MFOFyEQwJcVgrUTqOUWrEQkDSyfjVKx0xKpMym300aSA2kjgPpkGaagJnWLdnKsO2gdDGnDKENTRXSx1Xw8SQ9zJFTmai0TS8rC3oW1qvIxhwUPUiCgsetiiZF5ReIiCavbKlm8XHErkkO1GoW2Hhg/AMK5KK51AbyjGVAdmz0ueajMqrcUKMZkAjT9f76a5lZp3TkfIYkDnnMx fvBgoAKngkwhWuRr4Kmt077dNEavuCEwr1g2p4oeASTd2xGL9JwrlNP1l3set Mr/YyDGaUE39WZNXaNMCt0WxuAgKm4x mJUTQ7LuhNv6/J2TZVmKtWh QZ1JcG/TbskZqk1h2uQ HLdIlkZdJpQlBS4utEO4mAH3naI0AOFa HKyiT 5OVCEwVaSED7e2qXxocVBVMg5paaH5oTzloh5RAS6Y EhNWrNO9iYM4RIfr sA93WN xRKdfqNC0mkpTZ2lta4siL/EULdjrL2tO2sAymBsE/PMVjac8d5KQ2NzWNj 4FyoHDD9xe7469Npu 7ApQEDz7HitBYejtbguX2BcYqwC3hjRGVUFUZkvmxdSbbmrFPUsufkSrUdUljaBS Cdms6wZA3P5dH5rS87PHDE h49qUnF6D4P0WlQoMd6UY9hShFHnPp67AwMWY c5UVjOeF/q8xtQwX1 cuWMRpDfpKbRUJmYGk37sxmlQDOmXz9N3QotGEATFa2MqS2CCO2MZQeMyDoRWRci60ZM78FPKLh09XY0pr5IIvRrLAdKjNkgYzbEmA0zliP wdgojI3B2DhMTsAo2CQKNoWCTaNQmrPDhErNQaXmolLzUKn5qNQCVGohKrUIlWVxyikpSj2VDPh9hqanMGWW4JzByslTTgFTYYFWWkBVHCl2EbVejEYvVi3lRXSiSL0FNOjw 8ZiaAkmvQSzXoJFL8EqKG0W0K7D7ztoaClOvRSXXopbL8UjKL0W0GdBrT/lUYWzLdVRKpN98oxPOte vwkeJBUE h83yhEapgkEqAAWATvKO3GAeSBBkXLTjKvcjI72yH2KW561JBMWdGaQ3keGpJNR2YobIDICJkbD3FA6zbDQl3w2LDIhmxi6MgpySsD5IosZC57dSId fLz03dLPu3t7v3j3vH/teb3eorWNX6zayu/ 8iabBTOr9qja4Cazws6njfGO3LPEQXxHXs4L7/75 K9fmJmRv4wm/rz7F30GVwDAky5T5gQpI9lJAAOB0QwkqaGJEyBGZRKiUTQDMGAElAsVLSK5af/t78qph86I6XQCMhgZx4BhmlgnJFn0qCRDY7I2AwYDzJgF58oIFKWhCZLU3ATTtEZdZFmNVnOU0 DMWTZgniijDjiRAKJEHRHhbzr0Bkgpbi0m0LdcDE0WsrauE4dkcGkWBsHoAZkERpjJeGW3w4Q4E4yF011i81SLE6X9QXsc6SBdCFqHBJ0kfUYlIRMUgVmaxkfAeYN7gzY3GaQojUpzlJNh qzoJE6UmQacUCBkDwoM8MANt/d3bGpRySAAEvDFLQ/cP Yu VWNk/wAvH9Rv7UW7355u1XA SoVDEgmwIyjcQxC2SVG4RWS4B5vHvTgGvIYiKaAwdHhBgBP4VUQCIDHG 7RiugZBBdWDAYFR4aEOJcbHKHuNQQsPGnICPbazC5E hgSiGsAPsVPPYMQnfcMBhf5DQll c3gSKkcQyCyxg0ZCXVY5kJO3feonnkBO6l7fuZJf1Ene2Oz2s/3iDusKiVMrU0fOKcSg9kFL1nxJJ6tsl/bY17zxN8s0YIzLZXEa8pl9o9emcfcVDHE5WVZ7akthUQIxGVMbrFVK I8j/jybatBtXzE9uW21Tajypp1BzYtmDNvmy1LhkxZbN3mzbC12zRjyxZbl20TNjVPO5CwZpGqKUFChR3mms rTdMJCaZ6FacdcByq266aka1A2lDbEqWw7VmwkWTr9KdgxqZdVjjNVsu4u0WtJqyEp89neDsA7nrRnB3LgqJsaTIqBcWqDEhn1ii261C52kMqbQcuLZlz9arYVAtx6WL72iE 8YlTcdu6IumVpC1TE821riZtSXM1aVka6kPOSdemVjOG8hH/D1mSNGCTQqwxgoUIFTb PmQaNL14q7P/lOjmAR/tvwx nUKpfHy5u QcR1JvREcf0Wv0VD1M4 rQNgtyh1wonxETGZXPh12qX6pdKgMcmkLuGLxU4bR/hur7HF3b0e9zru0foGl2odwz6qUgnvNPdfMEVM/yPB19Qm1QM9UohZtJT H/ffymUyau/IhpGdUnAAA=') format('woff2');
font-weight: normal;
font-style: normal;
}
text {
font-family: 'Press Start 2P';
font-size: 12;
}
</style>
</defs>
<rect width="89" height="55" fill="black" />
<rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
<text text-anchor="middle" x="44.5" y="31" fill=" white">1234</text>
<rect x="78" y="45" width="9" height="8" fill="#FF4F0A" />
<rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
</svg>If your svg only uses google webfonts, you can also try vecta's nano optimiser – it can retrieve these fonts and include them as font subsets ( including only needed characters/glyphs).