SVG / Google Fonts / Export

[robert_muench]

Hi, I have a graphic that uses graphic-text (the icon A) with the Google Font "Lobster". I export the graphic as SVG and use it inside a web-page (see first two graphics at http://test.saphirion.com/nlpp.html ) 

 

The problem is, that the lobster font isn't always displayed. The web-page itself loads the lobster font-family with: 

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

But it seems this isn't carried over to an SVG element in a web-page. Further, it seems that the correct way to use a special font in an SVG element is:

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster');</style>
</defs>

But how do I get this into the exported SVG of Affinity? I don't want to post-process the files.

 

[robert_muench]

Additional: I know I can use the "convert Text to curves" option in SVG export. This gives a bit bigger files but I would like to know how to do it while keeping the font specification active.

[v_kyr]

Well let's quote Mrs. Amelia Bellamy-Royds „Using SVG with CSS3 and HTML5.“ (O’Reilly) here:

Quote

...

If you embed an SVG with text elements into a web page with a <img> tag, or if you use it as a CSS background image, you should be aware of a few restrictions:

No web fonts

Browsers prevent external file downloads with SVG used as an image, so any @font-face references to web fonts will be ignored.

Loss of accessibility

Text in the image won’t be read by screen readers; you must provide an accessible equivalent using the <img> element’s alt attribute (or ARIA attributes).

No text selection

Text in the image can’t be selected or copied by the user. This means users cannot easily look up or translate unfamiliar words, and text can’t be searched with browser “Find” commands.

Lowered editability

You won’t be able to edit the text directly when working with the HTML; you’d have to make changes in the SVG document, upload the file, and refresh the HTML page that references it. There is also no way to update the text via script.
Due to these limitations, when an SVG will be used as an image, it’s fairly common to convert text inside it into paths in the shape of the letters. Converting[…]“

…

„In contrast, when SVG markup containing <text> elements is placed inline as part of an HTML page, the disadvantages associated with text-as-image disappear: the text is editable, uses @font-face settings, is fully accessible, and can be copied by users or found with browser page-search features.

The accessibility improvements should also apply for SVG files embedded as interactive <object> or <embed> elements, although browsers have a tendency to be buggy with accessibility of SVG content inside an embedded object—so test carefully! The SVG text remains in a separate file, of course, so must be edited separately from the main web page. Whether this is an advantage or disadvantage depends on whether the test is reused on many pages (logos or advertisements), or specific to the current page (like decorative headings).“

Working with Web Fonts

Real SVG text requires real fonts to tell the browser how to draw each letter. You have three options:

• Use only common fonts that will be available on most systems.
• Use web font files that are linked by a CSS @font-face rule.
• Use web font data embedded in your SVG.

In the first two cases, you need to think carefully about fallbacks to use if your chosen font isn’t available. If you’re using a graphics editor, they won’t add fallbacks for you. You’ll need to open up your file in a code editor and edit the styles to change the font-family list.

If you’re using web fonts, you’ll also need to add an @font-face rule for each typeface. The format of the @font-face rule is the same as for CSS-styled HTML. Place the rule where you need it:

• If you’re using inline SVG, it automatically shares the @font-face rules that apply to the rest of the page.
• If you’re sharing web fonts between your SVG objects and the rest of the website, you can link your existing stylesheet (using the methods discussed in “External stylesheets”, in Chapter 3).
• Otherwise, create a <style> element in your SVG, and add the @font-face there.

...

...

I suggest you take a look into some SVG and HTML/CSS resources/books etc. here (like this for example) how to accomplish this best for your individual website needs.