Displaying custom fonts in SVG for iOS Chrome and Safari - ios

Question

I'm using an svg with custom fonts from google, but i'm hosting it myself. Here's the SVG file with the following code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="430" height="590">
<defs>
<style type="text/css"><![CDATA[
#font-face {
font-family: 'Fjalla';
src: url('http://build-podcast.com/fonts/fjalla.eot');
src: url('http://build-podcast.com/fonts/fjalla.eot?#iefix') format('embedded-opentype'),
url('http://build-podcast.com/fonts/fjalla.woff') format('woff'),
url('http://build-podcast.com/fonts/fjalla.ttf') format('truetype'),
url('http://build-podcast.com/fonts/fjalla.svg#fjalla') format('svg');
font-weight: normal;
font-style: normal;
}
text { font-family: Fjalla, sans-serif; font-weight: bold; fill: #4b5568; }
]]>
</style>
</defs>
<g id="logo">
<text x="135" y="60" font-size="210" transform="rotate(45)">/</text>
<text x="115" y="363" font-size="210" transform="rotate(-45)">\</text>
<text x="15" y="341" font-size="200">build</text>
<text x="15" y="475" font-size="127">podcast</text>
<text x="21" y="540" font-size="36">screencasts on tech tools</text>
</g>
</svg>
I'm using the img tag to display it on the main website
<img src="logo.svg">
It is displaying fine on desktop browsers and even on mobile browsers like Android Chrome. But it is not displaying at all in iOS 7 Chrome or Android. Any clue to how I can amend the SVG file code for the part on the custom fonts? Thanks!

Answer 1

I got fed up with trying to make the fonts to properly work in my SVG across all devices/browsers, so with my work around it helped that I have access to the original .ai file (.eps is fine).
My steps included:
- Open the original vector file in Adobe Illustrator.
- Select your text layers. Hold shift when selecting more than one. I find it easier do select multi layers through the Layers panel, which you can find in Menu under Window.
- Then, go to menu option Type and select Create Outlines.
This way we do not have to rely on calling fonts because your text is now just a vector shape. Now all that is left is to save your SVG:
- Select all your vectors.
- Go to menu option Object and select Artboards > Fit to Selected Art.
- Now go to File and select Export Selection....
- A Export for Screens dialog should pop up. On left side above .your Asset(s), click on the Artboards tab above
- On the right side, choose where you want to save.
- IMPORTANT STEP: select your format as *SVG.
- Lastly, click Export Artboard at bottom right.
That's all there is too it, and everything will appear exactly as it should across all devices and browsers!

Answer 2

We recently had the same problem having custom fonts displaying in SVG images. Before implementing this fix, the text would not show up in iOS on certain devices. After A LOT of debugging and trying different ways to solve it, we ended up with a CSS Font Fallback solution. This was the only way for us to solve the same problem as you describe.
Here is how we implemented it:
First we extracted the shapes of the characters using Adobe Illustrator like this:
<font horiz-adv-x="2048">
<font-face font-family="RobotoCondensed-Light" units-per-em="2048" underline-position="-150" underline-thickness="100"/>
<missing-glyph horiz-adv-x="434"/>
<glyph unicode=" " horiz-adv-x="434"/>
<glyph unicode=""" horiz-adv-x="549" d="M217,1341l-36,-261l-68,0l2,254l0,226l102,0M442,1341l-36,-261l-68,0l2,258l0,222l102,0z"/>
<glyph unicode="," horiz-adv-x="346" d="M246,19l-100,-277l-77,0l56,280l0,168l121,0z"/>
<glyph unicode="-" horiz-adv-x="497" d="M445,568l-399,0l0,104l399,0z"/>
<glyph unicode="." horiz-adv-x="440" d="M276,0l-130,0l0,166l130,0z"/>
<glyph unicode="0" horiz-adv-x="978" d="M867,564C867,376 834,232 767,131C700,30 607,-21 490,-21C372,-21 279,30 212,131C144,232 110,377 110,564l0,326C110,1077 144,1221 211,1324C278,1426 370,1477 488,1477C606,1477 699,1426 766,1324C833,1222 867,1077 867,890M747,911C747,1059 725,1173 681,1252C636,1331 572,1371 488,1371C405,1371 341,1331 297,1252C253,1172 231,1058 231,911l0,-366C231,398 253,285 298,204C343,123 407,83 490,83C573,83 637,123 681,204C725,284 747,398 747,545z"/>
<!-- ...... Complete characterset ...... -->
</font>
Then we defined the font using CSS:
<defs>
<style type="text/css">
<![CDATA[
#font-face {
font-family: 'RobotoCondensed-Light-Fallback';
font-style: normal;
font-weight: 300;
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRg............7yEuAS1Fmtsgn2C3mGC7pcSzGaItVzpDHKXKRoB2nd8b5m1ni67q0DVvtWpxe61sF59tcm+qiK+1YY21P2oWNdkPaA1Nv0meNl0KL0HwqtAmtRKFDaA9/APTVpT1K/YclSp7tiAGxtzbsEoOZYV9u9g8VM0kokz6M/klEI+HecECMVpoFhuIDsL5bmwAAAVSQKFMAAA==) format('woff');
}
]]>
</style>
</defs>
The magic happened once we named the font "RobotoCondensed-Light-Fallback" and then:
<text style="font-family:RobotoCondensed-Light,RobotoCondensed-Light-Fallback,Arial,sans-serif; font-weight: 300" font-size="36">Text</text>
What happens is that iOS uses <font-face> while all other browsers use the fallback font.
Hope this helps!
For your info, we used this definition in the SVG.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="270px" height="303px" viewBox="0 0 270 303" enable-background="new 0 0 270 303" preserveAspectRatio="xMidYMid meet" xml:space="preserve">

Answer 3

FWIW, it's likely that a Tiny PNG-optimised PNG at double-resolution will be waaay smaller than a text-heavy SVG with text converted to curves.
I was getting around 400k for an outlined SVG with about 50 labels of 2 - 6 words, but exported to PNG, ran it through Tiny PNG and got 70k.
So if you just need something for retina screens, consider the PNG route:
https://tinypng.com/
https://www.npmjs.com/package/tinypng-cli