Forum: Inkscape Embedding PUA Unicode Characters into SVG Font Editor

D04287d7e587c15875a70fcb36f706ba?d=identicon&s=25 Pete Blakemore (peteblakemore)
on 2013-02-07 17:52
Hey folks

I'm a web designer by day, not a developer in anyway, just have an
appreciation for it...!

So, I've been using Inkscape to create a custom glyph font for the
company I work for. I'm going to use it to implement @font-face on all
icons across our mobile and desktop platforms (I know there are
alternatives out there already, like Icomoon and FontAwesome, but we
want to manage everything in house).

I've managed to create the entire font and have run through Fontsquirrel
conversion process which spits out all the relevant TTF and WOFF, etc
files at the end. Now, where I'm getting unstuck is how can I embed PUA
unicode characters into my glyphs?

As I've been going I've been putting the unicode characters into the
Matching String column, suspecting that it's just for previewing text,
and that it won't actually embed. Sadly that is the case, but I can't
find any other way of embedding the unicode...

Please help!

I've tried using FontForge by the way, and actually managed to get it up
and running on OSX Lion. I'm using Mountain Lion now and it's just a
complete no go - I can get it installed using Terminal and Brew, etc,
but every time I try and open it the program just crashes. Doesn't even
get off the start line. That's a moot point anyway because I prefer
using Inkscape to FontForge :-D

Any help at all greatly appreciated.

Thanks folks!

Ae1344b7825447225e4d8f25d9114600?d=identicon&s=25 Carlos M. (carlos_m)
on 2013-11-14 19:36
Hey Pete,

Found your question doing a search for 'Unicode characters Inkscape SVG
font editor'. I am also creating a custom glyph font for the company I
work for. We are using the Private Use Area so that screen readers do
not read the characters out loud. Maybe you already solved your problem,
but I figured I would respond with what worked for me.

I'm sure you've come across this page: How to make your own icon webfont
That explains the steps pretty well, and has a decent template to get
started. But I preferred the video tutorial and starter template found
here: How to Make a Font with inkscape 0.47
<>. Go to her site to download
fontstarter.svg. (You might want to remove her alphabet glyphs in SVG
Font Editor).

As these tutorials indicate: draw a path, position it within the
boundaries of the page/artboard, then select it. Then, in SVG Font
Editor, create a new glyph, name it, and paste in a Unicode character.
It will look like a tiny rectangular box with the hex code inside e.g.
[e600]. Also paste the Unicode character into the Preview Text field.
Finally, highlight the glyph in the list and press the "Get curves from
selection..." button. The glyph should appear right above the Preview
Text field.

I tried entering &#xe600; (that should be "ampersand hash x e 6 0 0
semi-colon"; this forum and your browser might render it instead of
displaying the characters I typed) into Matching String but it just
treated it like a literal string (note that you can enter any random
string in Matching String, e.g. "butter" and then when you put "butter"
in the Preview Text field your glyph will appear). What worked for me
was to copy paste an individual rendered Unicode character into the
Matching String field. Go here to find them:

When you save the file, the glyphs will be embedded in the SVG. You can
then use or whatever to convert the
SVG file into a ttf or woff font. You can open the SVG in Notepad++,
you'll see XML that looks like this (the glyph tag is the font glyph,
and the path tag is your drawing) (the [] is the Unicode placeholder):
      <font-face />
      <glyph glyph-name="somename" id="glyph2456" unicode="[]" d="M
99.447,740.01098 H 900.553 L 500,225.01428 99.447,740.01098 v 0 z" />
  <path d="m -735.17,-731.59 h 80.10 l -40.55,514.99 -40.55,-51.99 v 0

Also, you can create a whole bunch of new glyphs in the XML like this
(should be "ampersand hash x e 6 0 1 semi-colon" in the unicode
<glyph glyph-name="name-e600" id="glyphNNN2" unicode="&#xe600;" />
<glyph glyph-name="name-e601" id="glyphNNN4" unicode="&#xe601;" />
<glyph glyph-name="name-e602" id="glyphNNN6" unicode="&#xe602;" />

Just make sure the ids are unique. Then, open this SVG file in Inkscape,
and in the SVG Font Editor, the Unicode characters will appear as little
boxes with tiny "e600" inside. If you save this file, then open it in
Notepad++, the &#xe600; (ampersand hash x e 6 0 0 semi-colon) will be
replaced with the little box [].

The biggest problem for me is taking drawings from our designer and
converting them to real paths. Make sure you Ungroup everything, then
use Path>Object to Path (or Path>Stroke to Path if they just drew a
thick line for a rectangle) and Path>Union, Path>Difference,
Path>Combine, etc., to get yourself a good clean compound path.

Hope this helps,
Please log in before posting. Registration is free and takes only a minute.
Existing account

NEW: Do you have a Google/GoogleMail, Yahoo or Facebook account? No registration required!
Log in with Google account | Log in with Yahoo account | Log in with Facebook account
No account? Register here.