fontello / fontello

Iconic fonts scissors

Fontello - icon font scissors

website: fontello.com, help: wiki

This tool lets you combine icon webfonts for your own project. With fontello you can:

1. shrink glyph collections, minimizing font size
2. merge symbols from several fonts into a single file
3. access large sets of professional-grade open source icons

Developers API

Fontello allows easy scripting, to implement different convenient features:

1. Open site from command line, with your configuration, and import edited project
   • Makefile example. That's a live working code, used for development of fontello itself.
2. Writing website plugins, to import/export icons via admin panel.

When more examples available, those will be added here.

API methods

1. POST https://fontello.com/ creates a session with your config and return you session_id. You can use it later to open fontello with your configuration and to automatically download your font. Session is stored for 24h. POST params (form-encoded):
   • config - (Required) content of config.json for your font
   • url - (Optional) if used, download button will link to your admin panel, where you can run importing script.
2. https://fontello.com/[session_id] - opening fontello with your config preloaded. When you edit font, your config is automatically sent to server
3. https://fontello.com/[session_id]/get - download your font.

Note. When you open site via API url, download button will have another text.

Examples

• Makefile - quick load iconic font from your project via CLI & save result back.
• fontello-cli - the same, as above, but written in node.js. If you don't like make utility, then fontello-cli is for you :)
• fontello_rails_converter - Ruby CLI gem for interacting with the API. Additional features (Sass conversion) for Rails integration, but should work for every project.
• grunt-fontello - lightweight integration with grunt

Authors

• Roman Shmelev (shmelev).
• Vitaly Puzrin (puzrin).
• Aleksey Zapparov (ixti).
• Evgeny Shkuropat (shkuropat).
• Vladimir Zapparov (dervus).
• Alex Kocharin (rlidwka).

Thanks to:

• Werner Lemberg for help with ttfautohint.
• Hermanto Lim for the image.

License

Fontello's code (all files, except fonts) is distributed under MIT license. See LICENSE file for details.

Embedded fonts are distributed under their primary licenses (SIL OFL / CC BY / CC BY-SA). See fonts info on fontello website for credits & links to homepages. This info is also included in generated font archives for your convenience (see LICENSE.txt file).

Generated fonts are intended for web usage, and should not be considered/distributed as independent artwork. Consider fontello a "font archiver" and credit original font creators according to their respective license.

Crediting fontello is not required :)

fontello's Issues

Resolve CSS names conflicts

When user selects "the same" glyphs from different fonts, their CSS names will intersect. This conflict should be resolved by adding postfix -2, -3, -4 and so on.

Join Iconic* to single font

somerandomdude/Iconic#8

Use http://graphemica.com/ to find proper symbol codes

Change error message if File API not available

Don't lock application if File API not available. Only show alert when user press load button. That's normal begaviour, since we have embedded fonts.

PS. I got a nasty fuckup, when tryed to demonstrate fontomas on ipad.

Generate test/demo html

• for generated fonts (multiple sizes)
• for all embedded fonts

Care about hinting data! Don't miss it.

related to #21 . We operate with SVG fonts, wich does not support hinting. So, hinting info is lost (if exists).

Rewrite algorythm to operate with OTF on server-side for final result.

Unassigned glyphs - leave empty

When producing a custom font set of selected icons, it would be nice if the un-designated glyphs were simply left empty.

Make CSS work with IE7-xxx

One of possible ways http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/ (thanks to Kris for the link).

In general, I'd prefer to copy bootstrap solution. You can make your own template, if you can't wait. This project has enougth tools for that. See how make html works.

Installing python fontforge on OSX?

I managed to get fontforge installed on OSX using brew (brew install -vd fontforge on OSX Lion) but I can't seem to get your rebuild scripts to use it.

How can I go about installing the fontforge python libraries?

Traceback (most recent call last):
  File "bin/build_embedded_fonts_js.py", line 8, in <module>
    import fontforge
ImportError: No module named fontforge
make: *** [rebuild-fonts] Error 1

Do new & sexy design

Awesome tool must have awesome design :)

Implement persistance

1. Always save last state (loaded fonts, selections, ...)
2. Implement light session control for Rearrange stage. Simple popup, where one can add new session, select existing one, or delete stored)
3. We should also control some font metadata, like font name and file name.

Use IndexDB or localStorage. Report error if not exists.

Generate webfont pack on server side

• most with fontforge
• EOT via http://code.google.com/p/ttf2eot/

(!) Seems fontforge already supports EOT too https://github.com/somerandomdude/Iconic/blob/master/scripts/font%20creation/iconic_fill.py#L42

Add growl-like notifications

twbs/bootstrap#943

Until bootstrap's notifications are not ready, use https://github.com/ehynds/jquery-notify for local errors, warnings and other messages.

Limit glyphs count ingenerated font to reasonable number

Big number of glyphs in generated font can cause too hight CPU usage. It seems reasonable to limit glyphs count to 100.

Strip spaces from source fonts

Seems, fontsquirell adds garbage to original iconic fonts (entypo, websymbols). Improve script, that prepare embedded deals:

1. (?) Use OTF as original source.
2. Keep sources in ./original, and converted in ./converted subfolders.
3. Remove empty glyphs AND fontsquirrel-enforced spaces/dashes.

(!) May be, we should strip such symbols from GUI only. Because those can be used by browsers to calculate rendering parameters.

Add graceful popup with offer to save kittens

I'd like to promote idea of crowdsourced font & ask help for design. Small noty message after pressing 'download' button will be smart enougth.

• recheck notifications proxy interface
• check that message can be closed
• find betted & impressive ways to show msg

Can we remove SVG in UI ?

Related to #23 . It seems possible to show symbols directly - embed OTF via data URI, and map via @font-face.

Possible profits:

• use hinting when available.
• the real look, instead of simulation

Add license info & config to bundle

1. Since CC BY / SIL licence usually require to show authorship, it would be nice to generate such text automatically.
2. It would be nice to store FULL font config, for future needs. For example, if user wish to edit font later.

Add `Font Awesome`

http://fortaweso.me/font-awesome/

New font, specially for botstrap. Very nice.

Improve glyphs rearranger

1. Try to keep original glyphs codes, when possible
2. No drag & Drop - vusually effective, but not useful. Allow edit symbol sign & symbol code on mouse click.

Font Upload removed?

Has the font upload feature been removed? That was the best feature of them all.
I am desperately looking for an open font subsetter to create a really compact custom icon font (created from free icons webfonts).

Any advise greatly appreciated.

Add setting to reallign glyphs

• middle line of small letters
• middle line of big letters

Consider, if we can simplify font-face pack generation

Currently, fontomas makes SVG font. Users have to manually use fontsquirrel generator, to make font-face pack http://www.fontsquirrel.com/fontface/generator

How can we simplify the situation (but without own fontforge backend)? Notes:

1. Kick FS team to fix SVG input in flash loader
2. Ask if they can provide limited public api just to build fonface packs.

Add demo with glyphs keycodes

It's convenient for designers to know keycodes shortcuts for each glyphs. Need such demo (or switchable texts [styles/codes] on original demo page)

Demo page choking on the reserved word "class" in IE7-8

Where: http://nodeca.github.com/fontomas/
Problem: the word "class" is used in fontomas.js, row 31 char 9.

Help with font generation steps

Walked through the steps in the app (http://screencast.com/t/jVmtwjovXPps) see video. Downloaded font kit was NOT the icon kit?

Is there a step I am missing? Is there a bug in the app?

Reorder data, prior to calculate file hash

It seems, that if glyphs are selected in different order, calculated hash will be different.

"Download all" button

Create button "Download all" for each set of fonts.

Consider removing websymbols

https://github.com/fontello/websymbols-uni.font

Font looks very unbalanced, with missed glyphs. It has some unique icons, but it seems better to ask other font authors to add those.

feature: swap glyphs and add support for otf/ttf

Hey there,

It would be awesome if there would be added support for otf and ttf, once the file uploader is back ( drag and drop? ). With that it would be awesome if a glyph swap functionality would be introduced, so people can swap for example small caps with normal lower case letters.

Once support for more font types would be given, an instant overview of a font's contents could be easily generated ( a feature which is also very nice )

Add search

It would be nice to search glyphs by semantic name. We already reserved synonym fields in config specs.

Add browser features detection

Check browser features, prior to run. If something critical missed - show fat error message with recommended browsers and links.

Features can be checked via built-in modernizer.

Show selected glyphs count

1. Rearramge button shold show count of selected glyphs
2. It would be nice do "disable" stages 2 & 3 if no glyphs selected

Show build progress better

After user clicks download, it can wait several seconds. We should show, that his click is not missed (by prepending clock icon).

Fix fonts rendering quality

Current icons images have problems:

• partially cropped (iconic)
• bad quality, especially on smoll sizes (all)
• invalid scale (webicons)

Make disk cache less aggressive

Now generated files are hold "forever". Seems, that's not needed. If we fix sime bugs, users will not be able to regenerate font.

Seems, 15-30 minutes for cache is enough, to avoid stupid duplicated clicks. Also, it would be nice to cleanup outdated files with cron-like task (via shell exec)

Fix embedded Entypo font

1. SVG source is broken. Use OTF.
2. Font is alligned to small letters baselines. Rescale to big letters, as other fonts are.

(*) If it's impossible to update CLI script - add text instruction how to manually add font from source (entypo site)

Brandico

All Icons in the boxes should be equally size and design. Corner radius etc.

wrong:
(f) (t) [g+]

good:
(f) (t) (g+)

:)

Embedded fonts dropdown broken at first load

1. Click "use embedded"
2. 3-rd menu item is "Iconic Fill" instead of "WebSymbols". It becomes correct only when some font closed.

IP binding errors

(!) Check for nodeca too.

• if i set listen.host = 0.0.0.0 , then server starts, but reply "not found" on http://fontello.com
• if i set wrong host name (fontomas.com), then server silently exit, without showing error.

Eliminate flash use

• Download - via server (as in modernizr).
• Clipboard - not needed, since all in archive

Make "Download" links on "Save Font" stage

• Make Save Fonts downloadable via Data URIs.
• Use flash for FF/Opera, if possible, to fix file name https://github.com/dcneiner/downloadify

Replace Brandico by Just Vector

The current Brandico is very limited as to the offered social services.

On the oher hand, Alex Peattie created the Just Vector social icons set with around 150 social services, in both vector and webfont format, and with a free license.

It's the one I currently use in production and I really think it should be integrated into Fontello.

Add google analytics for different actions

Since fontello is a single page app, just adding GA code is not enougth. We have to track tab switches, to detect activity.

https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide

Do catalog of additional OFL fonts

I think, we should state with embedded fonts of pro quality only. But it would be good idea to recommend additional free fonts (as external links). Via nav menu popup, for example.

Fix "copy to clipboard" link

On Save Font stage, make copy to clipboard work.

Fix `use embedded` button

When embedded fonts closed, they can't be added again with use embedded

Normalize line-height across fonts

line-height of icons are inconsistant when using multiple fonts.

rewrite clientside to `backbone`

Since complecity increases, we need more robust data model.

Clarify generated SVG font format

1. File name
2. Meta content and other fields
3. Glyphs names
4. Resolution / Size

`Load Font` button should understand OTF & TTF fonts

This feature seems to require server-side scripting.