Todd1
April 4, 2014, 7:26pm
1
I’m testing an svg that uses the Angelina font. The font renders fine in Safari and FF but not on iOS which defaults to sans-serif. I’ve tried numerous variations to get it to work but no luck. I also added svg http headers to the .htaccess file.
http://xiiro.com/svg.svg
Todd
<?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" width="300" height="200" xml:space="preserve">
<defs>
<font-face font-family="Angelina">
<font-face-src>
<font-face-uri xlink:href="resources/fonts/Angelina/angelina-webfont.svg#Angelina">
<font-face-format string="svg"/>
</font-face-uri>
</font-face-src>
</font-face>
<linearGradient id="gradient-roundedRectangle" x1="42" y1="2" x2="42" y2="102" gradientUnits="userSpaceOnUse" >
<stop offset="0" stop-color="rgb(240, 241, 244)" stop-opacity="1" />
<stop offset="1" stop-color="rgb(180, 184, 192)" stop-opacity="1" />
</linearGradient>
<filter id="shadow-outer" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="2" />
<feOffset dx="0.1" dy="3.1" result="blur" />
<feFlood flood-color="rgb(0, 0, 0)" flood-opacity="0.56" />
<feComposite in2="blur" operator="in" result="colorShadow" />
<feComposite in="SourceGraphic" in2="colorShadow" operator="over" />
</filter>
</defs>
<rect id="text" stroke="none" fill="none" x="32" y="46" width="226" height="83" />
<text fill="rgb(0, 0, 0)" font-family="Angelina, sans-serif" font-size="30" x="50.62" y="46">
<tspan x="50.62" y="65">... and the horse you </tspan>
<tspan x="98.11" y="96">rode in on.</tspan>
</text>
</svg>
dynamo mailing listhttp://freewaytalk.net/person/options
waltd
April 4, 2014, 7:44pm
2
You can only use TTF fonts in iOS. What format is Angelina?
Walter
On Apr 4, 2014, at 3:26 PM, Todd wrote:
I’m testing an svg that uses the Angelina font. The font renders fine in Safari and FF but not on iOS which defaults to sans-serif. I’ve tried numerous variations to get it to work but no luck. I also added svg http headers to the .htaccess file.
http://xiiro.com/svg.svg
Toddhttp://xiiro.com
<?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" width="300" height="200" xml:space="preserve">
<defs>
<font-face font-family="Angelina">
<font-face-src>
<font-face-uri xlink:href="resources/fonts/Angelina/angelina-webfont.svg#Angelina">
<font-face-format string="svg"/>
</font-face-uri>
</font-face-src>
</font-face>
<linearGradient id="gradient-roundedRectangle" x1="42" y1="2" x2="42" y2="102" gradientUnits="userSpaceOnUse" >
<stop offset="0" stop-color="rgb(240, 241, 244)" stop-opacity="1" />
<stop offset="1" stop-color="rgb(180, 184, 192)" stop-opacity="1" />
</linearGradient>
<filter id="shadow-outer" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="2" />
<feOffset dx="0.1" dy="3.1" result="blur" />
<feFlood flood-color="rgb(0, 0, 0)" flood-opacity="0.56" />
<feComposite in2="blur" operator="in" result="colorShadow" />
<feComposite in="SourceGraphic" in2="colorShadow" operator="over" />
</filter>
</defs>
<rect id="text" stroke="none" fill="none" x="32" y="46" width="226" height="83" />
<text fill="rgb(0, 0, 0)" font-family="Angelina, sans-serif" font-size="30" x="50.62" y="46">
<tspan x="50.62" y="65">... and the horse you </tspan>
<tspan x="98.11" y="96">rode in on.</tspan>
</text>
</svg>
dynamo mailing listhttp://freewaytalk.net/person/options
dynamo mailing listhttp://freewaytalk.net/person/options
Todd1
April 4, 2014, 7:46pm
3
I have it in the usual formats: ttf, eot, woff etc.
Todd
You can only use TTF fonts in iOS. What format is Angelina?
dynamo mailing listhttp://freewaytalk.net/person/options
