Displaying custom fonts in SVG for iOS Chrome and Safari -
i'm using svg custom fonts google, i'm hosting myself. here's the svg file 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 img tag display on main website
<img src="logo.svg"> it displaying fine on desktop browsers , on mobile browsers android chrome. not displaying @ in ios 7 chrome or android. clue how can amend svg file code part on custom fonts? thanks!
we had same problem having custom fonts displaying in svg images. before implementing fix, text not show in ios on devices. after lot of debugging , trying different ways solve it, ended css font fallback solution. way solve same problem describe.
here how implemented it:
first extracted shapes of characters using adobe illustrator 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 defined 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 named font "robotocondensed-light-fallback" , then:
<text style="font-family:robotocondensed-light,robotocondensed-light-fallback,arial,sans-serif; font-weight: 300" font-size="36">text</text> what happens ios uses <font-face> while other browsers use fallback font.
hope helps!
for info, used definition in 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">
Comments
Post a Comment