Fix fonts inside SVG diagrams

[imaginator]

For example the SVG diagram on http://new.buddycloud.com/architecture looks really bad unless you have open sans installed on your system.

@vitoravelino or @mrflix do you have any ideas?

[vitoravelino]

I never worked with svg, but I searched a bit and found this: https://code.google.com/p/canvg/issues/detail?id=248

I guess you have to declare the font-face style inside the svg tag.

[vitoravelino]

I think that would be necessary only if the svg is an external resource just like it is right now.

I copied the svg code and injected into the page and it rendered a bit different. A problem that I found was that if the font-weight is not included (e.g: 500) it doesn't render the font-family at all.

Changing the font-weight to the properly one I could achieve what you are expecting (see attached image).

[vitoravelino]

Try to use 300, 400, 600 and 700 as the font-weight. Maybe it could work even as an external resource.

[mrflix]

How about converting the text into paths? Thats the way pdf does it to be able to look the same on every machine.

In Sketch it's done via Edit -> Convert Text to Outlines

On 21 Feb 2014, at 15:23, Vítor Avelino notifications@github.com wrote:

Try to use 300, 400, 600 and 700 as the font-weight. Maybe it could work even as an external resource.

— Reply to this email directly or view it on GitHub.

[imaginator]

Your diagram looks like it should.

I see

            <text
                transform="translate(385 2136)"
                fill="white">
                <tspan
                    font-family="Open Sans"
                    font-size="13"
                    font-weight="bold"
                    fill="white"
                    x="0"
                    y="14"
                    textLength="94.154785">channel nodes</tspan>
            </text>

I would have thought that this would pick up the font "Open Sans - bold" without needing a weight. That would be ideal since I don't really want to be redefining the font creators weight.

Does that make sense?

[imaginator]

@mrflix could do that - but I'd rather not retool with sketch and loose the ability to copy paste text from diagrams.

[JanLindenberg]

Hi Simon and all,

I think in addition to specifying the font-family, the font needs to be loaded from somewhere. see: http://stackoverflow.com/questions/8597732/is-there-any-way-to-embed-a-google-web-font-script-in-an-svg-file

I found this explanation of using @fontface in the code of the SGV file.

see the 3rd block of code here: http://nimbupani.com/about-fonts-in-svg.html

Text using CSS @font-face

and also: http://stackoverflow.com/questions/14438368/prioritise-svg-font-with-google-web-fonts

maybe that could work?

On Fri, Feb 21, 2014 at 4:48 PM, Simon Tennant notifications@github.comwrote:

Your diagram looks like it should.

I see

<text
transform="translate(385 2136)"
fill="white">
<tspan
font-family="Open Sans"
font-size="13"
font-weight="bold"
fill="white"
x="0"
y="14"
textLength="94.154785">channel nodes</tspan>
</text>

I would have thought that this would pick up the font "Open Sans - bold" without needing a weight. That would be ideal since I don't really want to be redefining the font creators weight.

Does that make sense?

On 21 February 2014 15:23, Vítor Avelino notifications@github.com wrote:

Try to use 300, 400, 600 and 700 as the font-weight. Maybe it could work even as an external resource.

— Reply to this email directly or view it on GitHub< https://github.com/buddycloud/buddycloud.com/issues/17#issuecomment-35733878>

.

Simon Tennant | buddycloud.com | +49 17 8545 0880 | office hours: goo.gl/tQgxP

— Reply to this email directly or view it on GitHubhttps://github.com/buddycloud/buddycloud.com/issues/17#issuecomment-35742441 .

[mrflix]

@imaginator do you mean you don't want to loose the capability to copy the text from the diagram on the website? Because in Chrome I can't select the text in the svg.

[imaginator]

Looks like it's also an issue with FF (and I presume other browsers) opening remote resources: https://bugzilla.mozilla.org/show_bug.cgi?id=628747

The open-sans is pulled off a remote-origin (the Google font cdn) and this could be part of the issue.

[imaginator]

Note for later: http://nimbupani.com/about-fonts-in-svg.html

[imaginator]

Half solved with https://github.com/buddycloud/buddycloud.com/commit/e69ac64d7315499808084d4abe494d1d8599cc03