Missing font on a SVG logo

Question

I have an SVG logo that has been designed with the Nunito Sans font. The font is showing correctly on the website only if the font is installed on the computer. Please find below the code from the SVG image

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 501.58 501.58"><defs><style>.cls-1{fill:#243d62;stroke:#1d1d1b;stroke-miterlimit:10;}.cls-2{font-size:99.93px;fill:#fff;font-family:Nunito Sans;font-weight:700;}.cls-3{letter-spacing:-1px;}</style></defs><title>Logo512x512</title><circle class="cls-1" cx="250.79" cy="250.79" r="250.29"/><text class="cls-2" transform="translate(25.25 279.94)"><tspan class="cls-3">P</tspan><tspan x="64.66" y="0">acAnGO</tspan></text></svg>

I tried to save the fonts on the website but it never worked. As the Nunito Sans belong to Google, is there a way to assign it though a web link? If not what will be the correct code to link the font to the SVG logo? Thanks

Answer 1

There are two solutions for this:

1. Before exporting in your logo in SVG make sure to convert your text to outlines. Normally you can do this in Sketch or Illustrator quite easily by pressing right mouse on the selected text. I converted it to curves with a program (Affinity Designer) and below is the result. This can be accomplished with any editor. If you the code you should see the logo as it is intended.

<?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 2090 2090" 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-miterlimit:10;"><circle cx="1044.96" cy="1044.96" r="1042.88" style="fill:#243d62;stroke:#1d1d1b;stroke-width:4.17px;"/><g><path d="M136.853,872.872l128.243,0c31.367,0 55.795,7.842 73.282,23.525c17.488,15.684 26.232,37.682 26.232,65.996c-0,28.313 -8.744,50.381 -26.232,66.204c-17.487,15.822 -41.915,23.733 -73.282,23.733l-74.531,-0l0,114.087l-53.712,-0l-0,-293.545Zm121.581,138.237c36.919,-0 55.378,-16.1 55.378,-48.3c0,-16.377 -4.58,-28.521 -13.74,-36.433c-9.16,-7.911 -23.04,-11.866 -41.638,-11.866l-67.869,-0l0,96.599l67.869,-0Z" style="fill:#fff;fill-rule:nonzero;"/><g><path d="M489.128,957.813c28.591,-0 49.826,6.939 63.705,20.819c13.88,13.879 20.819,35.253 20.819,64.121l0,123.664l-49.548,-0l-0,-31.228c-4.719,10.825 -12.145,19.292 -22.276,25.398c-10.132,6.107 -21.86,9.161 -35.184,9.161c-13.602,-0 -25.954,-2.776 -37.057,-8.328c-11.104,-5.551 -19.848,-13.185 -26.232,-22.9c-6.385,-9.716 -9.577,-20.542 -9.577,-32.478c0,-14.989 3.817,-26.786 11.451,-35.392c7.633,-8.605 20.055,-14.85 37.265,-18.736c17.21,-3.887 40.944,-5.83 71.2,-5.83l10.41,0l-0,-9.576c-0,-13.879 -2.984,-23.872 -8.952,-29.979c-5.968,-6.107 -15.892,-9.161 -29.771,-9.161c-10.826,0 -22.138,1.874 -33.935,5.621c-11.797,3.748 -23.386,8.953 -34.767,15.615l-14.573,-35.809c11.381,-7.217 25.121,-13.185 41.221,-17.904c16.1,-4.719 31.367,-7.078 45.801,-7.078Zm-12.075,174.461c13.879,-0 25.191,-4.65 33.935,-13.949c8.744,-9.299 13.116,-21.304 13.116,-36.016l-0,-8.744l-7.495,0c-18.598,0 -33.033,0.833 -43.303,2.498c-10.271,1.666 -17.627,4.58 -22.068,8.744c-4.441,4.164 -6.662,9.854 -6.662,17.072c0,8.882 3.053,16.169 9.16,21.859c6.107,5.691 13.879,8.536 23.317,8.536Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M719.384,1169.75c-21.374,-0 -39.903,-4.303 -55.587,-12.908c-15.683,-8.605 -27.688,-20.819 -36.016,-36.641c-8.327,-15.822 -12.491,-34.282 -12.491,-55.378c-0,-21.096 4.372,-39.764 13.116,-56.002c8.743,-16.239 21.165,-28.8 37.265,-37.682c16.1,-8.883 34.698,-13.324 55.794,-13.324c14.435,-0 28.522,2.29 42.262,6.87c13.741,4.58 24.775,10.756 33.102,18.529l-14.989,36.641c-8.605,-6.94 -17.696,-12.214 -27.273,-15.823c-9.576,-3.608 -19.084,-5.412 -28.521,-5.412c-18.043,-0 -32.061,5.621 -42.054,16.863c-9.993,11.242 -14.99,27.411 -14.99,48.507c0,20.819 4.997,36.85 14.99,48.092c9.993,11.242 24.011,16.863 42.053,16.863c9.438,-0 18.946,-1.804 28.522,-5.413c9.577,-3.609 18.668,-8.883 27.273,-15.822l14.989,36.224c-8.882,8.05 -20.263,14.365 -34.143,18.945c-13.879,4.581 -28.313,6.871 -43.303,6.871Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1058.73,1166.42l-29.562,-68.702l-142.817,-0l-29.563,68.702l-54.129,-0l132.824,-293.545l43.719,0l132.824,293.545l-53.296,-0Zm-154.891,-110.34l107.424,0l-53.712,-124.912l-53.712,124.912Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1256.92,957.813c24.427,-0 42.609,6.939 54.545,20.819c11.936,13.879 17.904,34.836 17.904,62.872l-0,124.913l-52.047,-0l0,-121.998c0,-15.822 -2.984,-27.342 -8.952,-34.559c-5.968,-7.217 -15.337,-10.826 -28.105,-10.826c-14.99,-0 -26.995,4.719 -36.017,14.157c-9.021,9.438 -13.532,22.068 -13.532,37.89l0,115.336l-52.047,-0l0,-203.608l50.798,0l-0,30.396c6.939,-11.381 16.239,-20.125 27.897,-26.232c11.659,-6.107 24.844,-9.16 39.556,-9.16Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1631.66,1007.78l0,140.735c-13.324,6.662 -29.493,11.936 -48.508,15.822c-19.014,3.886 -38.375,5.829 -58.084,5.829c-30.256,0 -56.488,-6.037 -78.695,-18.112c-22.206,-12.075 -39.208,-29.424 -51.006,-52.047c-11.797,-22.623 -17.696,-49.479 -17.696,-80.569c0,-30.811 5.899,-57.529 17.696,-80.152c11.798,-22.623 28.591,-39.972 50.382,-52.047c21.79,-12.075 47.397,-18.112 76.821,-18.112c20.541,-0 39.833,2.984 57.876,8.952c18.043,5.968 33.032,14.504 44.969,25.607l-17.905,38.723c-13.601,-10.548 -26.995,-18.112 -40.18,-22.693c-13.185,-4.58 -27.689,-6.87 -43.511,-6.87c-30.257,0 -53.088,8.952 -68.494,26.856c-15.406,17.905 -23.109,44.483 -23.109,79.736c0,72.172 31.645,108.258 94.934,108.258c18.876,-0 37.751,-2.637 56.627,-7.911l0,-73.699l-63.289,0l0,-38.306l111.172,-0Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1822.78,1170.16c-28.591,0 -53.365,-6.107 -74.323,-18.32c-20.957,-12.214 -37.126,-29.702 -48.507,-52.464c-11.381,-22.762 -17.072,-49.41 -17.072,-79.944c0,-30.534 5.621,-57.112 16.863,-79.736c11.243,-22.623 27.412,-40.041 48.508,-52.255c21.096,-12.213 45.94,-18.32 74.531,-18.32c28.591,-0 53.366,6.107 74.323,18.32c20.958,12.214 37.058,29.632 48.3,52.255c11.242,22.624 16.863,49.202 16.863,79.736c-0,30.534 -5.691,57.182 -17.072,79.944c-11.38,22.762 -27.55,40.25 -48.507,52.464c-20.958,12.213 -45.593,18.32 -73.907,18.32Zm0,-42.887c26.926,0 47.953,-9.299 63.081,-27.897c15.128,-18.598 22.692,-45.246 22.692,-79.944c0,-34.698 -7.564,-61.276 -22.692,-79.736c-15.128,-18.459 -36.155,-27.688 -63.081,-27.688c-27.203,-0 -48.369,9.229 -63.497,27.688c-15.128,18.46 -22.692,45.038 -22.692,79.736c-0,34.698 7.564,61.346 22.692,79.944c15.128,18.598 36.294,27.897 63.497,27.897Z" style="fill:#fff;fill-rule:nonzero;"/></g></g></svg>

2. Include nunito sans through google fonts in your tag in your document. You can select styles here. Then for embed, choose link (for html) or @import (if you want to include through CSS) and copy paste that link to your html or css file. You'll need the html provided by google.