Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/FontCustom/fontcustom

Generate custom icon webfonts from the comfort of the command line.
https://github.com/FontCustom/fontcustom

Last synced: 15 days ago
JSON representation

Generate custom icon webfonts from the comfort of the command line.

Host: GitHub
URL: https://github.com/FontCustom/fontcustom
Owner: FontCustom
Created: 2012-10-08T02:14:42.000Z (about 12 years ago)
Default Branch: master
Last Pushed: 2023-03-08T19:00:37.000Z (over 1 year ago)
Last Synced: 2024-10-29T15:37:53.412Z (15 days ago)
Language: Ruby
Homepage:
Size: 1.56 MB
Stars: 3,284
Watchers: 102
Forks: 423
Open Issues: 131
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSES.txt

Awesome Lists containing this project

README

[![Gem Version](https://badge.fury.io/rb/fontcustom.png)](http://badge.fury.io/rb/fontcustom)
[![Build Status](https://api.travis-ci.org/FontCustom/fontcustom.png)](https://travis-ci.org/FontCustom/fontcustom)
[![Code Quality](https://codeclimate.com/github/FontCustom/fontcustom.png)](https://codeclimate.com/github/FontCustom/fontcustom) [![Bountysource](https://www.bountysource.com/badge/tracker?tracker_id=32953)](https://www.bountysource.com/trackers/32953-endtwist-fontcustom?utm_source=32953&utm_medium=shield&utm_campaign=TRACKER_BADGE)

## Font Custom

**Icon fonts from the command line.**

Generate cross-browser icon fonts and supporting files (@font-face CSS, etc.)
from a collection of SVGs
([example](https://rawgit.com/FontCustom/fontcustom/master/spec/fixtures/example/example-preview.html)).

[Changelog](https://github.com/FontCustom/fontcustom/blob/master/CHANGELOG.md)

[Bugs/Support](https://github.com/FontCustom/fontcustom/issues)

[Contribute!](https://github.com/FontCustom/fontcustom/blob/master/CONTRIBUTING.md)

### Installation

Requires **Ruby 1.9.3+**, **WOFF2**, **FontForge** with Python scripting.

```sh
# On Mac
brew tap bramstein/webfonttools
brew update
brew install woff2

brew install fontforge --with-python
brew install eot-utils
gem install fontcustom

# On Linux
sudo apt-get install zlib1g-dev fontforge
git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli && cd sfnt2woff-zopfli && make && mv sfnt2woff-zopfli /usr/local/bin/sfnt2woff
git clone --recursive https://github.com/google/woff2.git && cd woff2 && make clean all && sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin/
gem install fontcustom
```
####Note for windows:

1. Install fontforge: http://fontforge.github.io/en-US/downloads/windows/
- Install to a path without spaces, eg c:\FontForgeBuilds
- At the end of the installer check the 'run fontforge' box. It finishes some set up.
2. Add the installation path to your System PATH variable (c:\FontForgeBuilds\bin)
3. Open up a new command prompt and test it. `fontforge -help`
4. gem install fontcustom

### Quick Start

```sh
fontcustom compile my/vectors # Compiles icons into `fontcustom/`
fontcustom watch my/vectors # Compiles when vectors are changed/added/removed
fontcustom compile # Uses options from `./fontcustom.yml` or `config/fontcustom.yml`
fontcustom config # Generate a blank a config file
fontcustom help # See all options
```

### Configuration

To manage settings between compiles, run `fontcustom config` to generate a
config file. Inside, you'll find a list of [**all possible options**](https://github.com/FontCustom/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.yml).
Each option is also available as a dash-case command line flag (e.g.
`--css-selector`) that overrides the config file.

### SVG Guidelines

* All colors will be rendered identically. Watch out for white fills!
* Use only solid colors. SVGs with transparency will be skipped.
* For greater precision in curved icons, use fills instead strokes and [try
these solutions](https://github.com/FontCustom/fontcustom/issues/85).
* Activating `autowidth` trims horizontal white space from each glyph. This
can be much easier than centering dozens of SVGs by hand.

### Advanced

**For use with Compass and/or Rails**

Set `templates` to include `scss-rails` to generate a SCSS partial with the
compatible font-url() helper. You'll most likely also need to set
`preprocessor_path` as the relative path from your compiled CSS to your output
directory.

**Example Use in Rails**

Add `gem 'fontcustom'` to your gem file.
```
bundle
```
Create a `fontcustom.yml` file with something like this:
```yml
# config/fontcustom.yml

font_name: icons
css_selector: .icon-{{glyph}}
preprocessor_path: ""
autowidth: false
no_hash: true
force: false
debug: false
quiet: false

input:
vectors: app/assets/icons

output:
fonts: app/assets/fonts
css: app/assets/stylesheets

templates:
- scss
```

This tells the gem to take the vectors from `app/assets/icons` and create fonts and stylesheets for them.

Create a file in lib/tasks called `icons.rake` :

```ruby
namespace :icons do
task :compile do
puts "Compiling icons..."
puts %x(fontcustom compile)
end
end
```

Load up the icons directory and test it out.

Run this command with
```sh
rake icons:compile
```

This should run the installed and configured gem to create your icons:

```sh
Compiling icons...
create .fontcustom-manifest.json
create app/assets/fonts
create app/assets/fonts/icons.ttf
app/assets/fonts/icons.svg
app/assets/fonts/icons.woff
app/assets/fonts/icons.eot
create app/assets/stylesheets/_icons.scss
```
Access these new icons by creating a tag with the class `icon-{{glyph}}` where the {{glyph}} is the name of the svg you put in the icon folder.
For example, if you added a file called 'cars54' icon would look something like this:

```html