CSS/Html - Web via Glyphs

Hi all,

I try to update an Icon-Font via Glyphs 2.
I also want to create an overview of the Icons via html/css-sheet, also for the programmer.
(before, I just made a screenshot of the glyphs-overview but, could be more comfortable to get the Hex-Values)


Is there a possibility to show the Unicode/Css AND the Hex/Html ›names‹ in the Glyphs overview? (uniE60 | /E600 and &#58881 etc.)
Now there are just the unicode names, which i have to »decode« to html …).

An improvement (for web an icons fonts) would be an export-function to build a »glyph-table« automaticly (f.e. like ico-moon does)?
I would try to make a script to do this automaticly, but i have just a few skills, so it takes a long time :slight_smile:


a) if you make the grid view big enough, you should see the unicode values in the font view, or switch to the list mode.
b) a script would be the best option. That gives the best flexibility.

If you can take care of the HTML/CSS, I can do the Python scripting. Send me an e-mail: res (at) this website without www.

I made a little Fontviewer Utility some time ago for similar reasons. Drop your iconfont on the app and it displays some Info about the font including a complete glyphlist. If you hover a glyph in the glyphlist, it shows you the html code in decimal and hex as a tooltip.
If you need a html file, turn on Debugmode in the app defaults, so you can save the html output to disc and modify it as you wish.


ok, thank you.

@art: I will try it

@mekka: I have send a mail

Hi all,

(I dig this post out again because he fits the theme)

I try to script this ‘HTML-Glyph-Table’. So far everything works fine and I am on the last steps…

Now the question:

It would be very comfortable if I could export the ‘web-font-packages’ via script (and not do this via cmd-e, looking for the folder etc…).

Is there a code method to do this in a ‘simpel’ py-script command? (I mean not in a ‘plugin-way’). I was looking for the right scripting-method, but don’t find - or understand - something like: exportWebFont(MyPath) …

I fear this could be a bit more complicated?!

This would be a great last step to finish the script in the next few days …


This is currently not possible. But I will try to fix that.

Thank you,

would be great to keep a nice workflow.

Why not save it in Glyphs.defaults[“WebfontPluginExportPath”]?


this will set ‘myPath’ as the directory, right?
still I have to export the font in glyph, or?

I would let the user export the font, and whenever he wants, he can have the HTML/CSS written to the same output folder.

This was also my first method.

But now I ‘link’ the export to the font.glyphs,
and build this structure (especially for programmer):

(main-folder + font.glyphs)
table-folder + html
styles-folder + styles.css + fonts.css
fonts-folder + webfont-packages

@mekka: In your method I had to build the folder ‘fonts’ ‘around’ the web-fonts.

Maybe I just set the webexport-path to the actual fonts folder and let the user do the rest, for now …

Hi all,

I finished working on this problem,
maybe this could help somebody now:


any suggestions welcome :slight_smile:

Hi nevu,

great script! This is what i was looking for. I got it working some days ago somehow, but now i get this error:


Somehow i can’t let the script write files or create folders (I encounter the same problem with other scripts). Is there an other threat about this already? Couldn’t find.

I also encountered a little problem with the css. Since I have an Icon im my font called “box”, the font class clashed with the glyph table layout class “.icon_box”. Maybe the layout classes could be named “.icon-box”, “.icon-panel” etc.

Thank you, would be great to use this in my workflow!

You most likely have the App Store version. The sandboxing blocks the scripts.

The easies workaround is to use a path inside: ~/Library/Containers/com.schriftgestaltung.Glyphs

Or use a NSOpenDialog to define the output path.