Git Product home page Git Product logo

grunt-embedfont's Introduction

Travis

grunt-embedfont

Create web-embeddable font files and css.

Usage Notice

Before converting fonts, please ensure that you are allowed to do so. End-users of this software are solely responsible for securing and maintaining the right to convert and use fonts from the fonts' copyright holder.

Getting Started

This plugin requires Grunt ~0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

Installation

OS X

brew install ttfautohint fontforge --with-python
npm install grunt-embedfont --save-dev

You may need to use sudo for brew, depending on your setup.

Linux

sudo apt-get install fontforge ttfautohint --with-python
npm install grunt-embedfont --save-dev

Windows

npm install grunt-embedfont --save-dev

*windows users should use the node font engine setting. The node engine currently only supports converting from ttf source fonts

GruntFile

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-embedfont');

The "embedfont" task

Overview

In your project's Gruntfile, add a section named embedfont to the data object passed into grunt.initConfig().

grunt.initConfig({
  embedfont: {
    default: {
	    options:{
		    fontPath: 'assets/fonts',
		    stylePath: 'assets/less',
		    relPath: '../fonts',
		    output: 'less',
		    engine: 'fontforge'
	    },
	    fonts: {
		    FontFamilyOne: {
			    normal: {
				    '200': 'font-src/FontOne-Light.ttf',
				    '400': 'font-src/FontOne-Regular.ttf',
				    '700': 'font-src/FontOne-Bold.ttf'
			    },
			    italic: {
				    '200': 'font-src/FontOne-LightItalic.ttf',
				    '400': 'font-src/FontOne-RegularItalic.ttf',
				    '700': 'font-src/FontOne-BoldItalic.ttf'
			    }
		    },
		    FontFamilyTwo: {
			    normal: {
				    '400': 'font-src/FontTwo-Regular.ttf',
			    }
		    },
	    }

    },
  },
});

Options

options.fontPath

Type: String Default value: 'fonts'

The font directory path; fonts will be saved to this path.

options.stylePath

Type: String Default value: 'style'

The style directory path; CSS / Less will be saved to this path.

options.relPath

Type: String Default value: '../fonts'

The relative path from the style directory to font directory.

options.output

Type: String Default value: 'less' Possible values: 'less' 'css' 'sass'

The format of stylesheet to output.

options.engine

Type: String Default value: 'fontforge' Possible values: 'fontforge' 'node'

The node engine can currently only convert from ttf source fonts.

options.reformatNames

Type: Boolean Default value: true

When reformat names is set to true, font names are created using options.reformatFn.

options.reformatFn

Type: Function Function Signature: function( name, style, weight ){ return fontNameString; } Default function return value: [name]-[weight]-[style]

Reformat function should return a font name without extension.

options.fontTypes

Type: Array of Strings Default value: ['ttf','woff','eot','svg']

An array of font types to generate.

Usage Examples

TODO

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

0.1.0 0.2.0

grunt-embedfont's People

Contributors

scrum avatar tylerbeck avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

grunt-embedfont's Issues

Woff2 support

Are there any further plans for updates on this plugin?

I'm happily using it, but now starting to miss woff2 support.
Seems fairly trivial to add. I could create a pull request if interested.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.