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.
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.
As a piece of text in Sketch (Illustrator Alternative), I’m not sure that’s the answer you’re looking for? (As in the font was local, but the SVG outputs it as font-family:‘FuturaLT’ same as my heap font
Edit one of your files to see what it takes to get it to work on the web based on my instructions above
(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)
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.
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.
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?
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
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.