Using a custom web font within an SVG file


(Jack Leonard) #1

Hi,

So i’ve trawled through the entire forums and can’t find a fix for my custom font problem.

I’ve previously installed the font ‘FuturaLT’ in resources folder, then added as a custom font through CSS and even referenced the {$resourceFolderName}

I’ve also tried calling the font from an external source (My personal website) and adding as a custom font that way.

But heres the thing, the font works with text created in Hype - but not with text in my SVG’s. Now all my SVG files refer to the font as the same font-family name in hype - ‘FuturaLT’

I’ve been scratching my head for hours, could anyone at all help me.

I’d love to share the file but it’s confidential atm.

Any help is SERIOUSLY APPRECIATED :slight_smile:


#2

Using a font within an SVG requires a defs section:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="30" viewBox="0 0 1000 300">
    <defs>
        <style type="text/css">
            @font-face {
                font-family: 'sfns_displayregular';
                src: url('system_san_francisco_display_regular-webfont.eot');
                src: url('system_san_francisco_display_regular-webfont.eot?#iefix') format('embedded-opentype'), url('system_san_francisco_display_regular-webfont.woff') format('woff'), url('system_san_francisco_display_regular-webfont.ttf') format('truetype'), url('system_san_francisco_display_regular-webfont.svg#sfns_displayregular') format('svg');
                font-weight: normal;
                font-style: normal; }
        </style>
    </defs>

    <text x="250" y="150" font-family="sfns_displayregular" font-size="120">
        SF Font 
    </text>
    
    <text x="250" y="250" font-family="courier" font-size="120">
        Courier
    </text>
    
    <!-- Show outline of canvas with a 'rect' element -->
    <rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2"/>
</svg>

So as long as your have your font files in the same folder as your SVG, you can reference them in your SVG without any folder paths or using ${resourcesFolderName}

  • Make sure you don’t have ‘Automatically optimize when exporting’ checked when your SVG is selected.
  • Drag and drop your font files and SVG into your resource library and you should be able to use a similar format as the above code.

font.zip (118.1 KB)


(Jack Leonard) #3

Thanks for the quick reply Daniel :slight_smile:

My file uses over 100 SVG’s (It’s a very complex infographic - I can’t wait to show it to you all)

Does this mean I have to change the xml of every single one to include: ? That makes Hype very impractical for me, is there no workaround?


#4

How were you using the font-family in your SVGs outside of Hype?


(Jack Leonard) #5

As a piece of text in Sketch (Illustrator Alternative), I’m not sure that’s the answer you’re looking for? :slight_smile: (As in the font was local, but the SVG outputs it as font-family:‘FuturaLT’ same as my heap font


#6

Sounds like you need to:

  1. Edit one of your files to see what it takes to get it to work on the web based on my instructions above
  2. (First backup your SVGs!) Find > Replace within your SVG files to make the modification needed using a text editor like Atom (you can find + replace in all files at once)
  3. Confirm that these files display the correct font on computers that don’t have the font (successfully pulling in your font files) when embedded in a regular HTML page.
  4. Drag + Drop your SVG files and font files into Hype

These steps don’t have much to do with Hype, but test as you go and let us know if you see any issues when working with these in Hype.


(Jack Leonard) #7

Thank you so much for the reply again. While the find and replace is useful it only allows you to file & replace within one file? (Using Atom now, doesn’t do it for all files at once as far as I can see)

Could you show me how to do it with all files at once?


#8

To do that, Drag + drop a folder onto Atom. This loads a project/folder. Next, press ⌘ + shift + f

You’ll then see what Atom finds in that ‘Project’ and you can run a replace.

(Please make a backup first because this can be super destructive)


(Jack Leonard) #9

No Joy. Edited all the files so that they have <style type="text/css"> @font-face { font-family: 'FuturaLT'; src: url('FuturaLT.eot'); src: url('FuturaLT.eot?#iefix') format('embedded-opentype'), url('FuturaLT.woff') format('off'), url('FuturaLT.ttf') format('truetype'), url('FuturaLT.svg#FuturaTOTBold') format('svn'); font-weight: normal; font-style: normal; } </style>

In . My Hype document font setup has the font files in resources and this in the head (custom css font) : <style> @font-face { font-family: 'FuturaLT', futura-pt, futura, Helvetica; src: url('${resourcesFolderName}/FuturaLT.eot?#iefix') format('embedded-opentype'), url('${resourcesFolderName}/FuturaLT.woff') format('woff'), url('${resourcesFolderName}/FuturaLT.ttf') format('truetype'), url('${resourcesFolderName}/FuturaLT.svg#FuturaTOTBold') format('svg'); } </style>

I’m honestly at a loss here and would really appreciate anymore insight into what I’m doing wrong


#10

If you can share a small sample with an actual svg file in your hype document that would be great.


(Michael Alexander) #11

If you save your SVG using Adobe Illustrator and select the font type: "Convert to outline*, you can ignore all issues relating to fonts. Otherwise you must have access to the binary file in the proper format required by your rendering agent, and reference it in a defs section of your svg file with the @font-face import statement.

mdajobs