sunflowerdeath / webfonts-generator Goto Github PK

When being done with building the fonts, there should be an option to have a results object in the finalizing callback, that would allow the user to choose to write the output to another location or return it, in case of a WebPack loader. Here is an example on how this would be useful:

var gen = require("webfonts-generator");
var glob = require("glob");
var path = require("path");
var utils = require("loader-utils");

function toPublic(content) {
    // This is copied from file-loader:
    var query = utils.parseQuery(this.query);
    var url = utils.interpolateName(this, "[hash].[ext]", {
        context: query.context || this.options.context,
        content: content,
        regExp: query.regExp
    });
    this.emitFile(url, content);
    return url;
}

module.exports = function(source, map) {
    // the source is the actual data, but we don't want that, but an object.
    var fontData = require(this.resourcePath);
    var next = this.async();
    gen({
        files: glob(fontData.path),
        writeFiles: false, // <---
        cssFontsPath: fontData.url,
        types: ["ttf","woff","eot","svg"],
        rename: function(n) { return path.basename(n, path.extname(n)); }
    }, function(error, result){ // <---
        if(error) next(error);
        // emit the font files, thus turning it into a path relative to the root.
        // We then generate an URL for the public.    
        var font = {
            eof: makePublic.call(this, result.eof),
            ttf: makePublic.call(this, result.ttf),
            woff: makePublic.call(this, result.woff),
            svg: makePublic.call(this, result.svg)
        }
        var css = result.generateCss(font);

        // Return the CSS for further processing
        cb(null, css);
    });
}

As you can see here, a font config is loaded and then processed, turned into a proper font and then emitted to the webpack. Do you think this would be possible?

As a little bonus, I have also added the idea to have the result object also get a function to make the CSS with the generated URLs.

BTW, if the functionality was given, this code would already work! :)

Kind regards, Ingwie.

Hi ! Thx for your font generator, it is very helpful ;)
But I have an issue with the html file. When I set

html: true,
htmlTemplate: 'src/templates/html.hbs',
htmlDest: 'dist/index.html',

renderHTML function seems to be called but handlebar crashes with this error message:
Missing helper: "removePeriods"

I had to add it manually in my JS file.

Any idea ?
Anyone with the same issue ?

Have a good day.

I can use version 0.3.5，please fixed it out，thks~

I am switching from icomoon to webfonts-generator and I am using a codepoints.json for the old svgs. This works fine for the old ones but all new Icons are not automatically added to the codepoints.json.
I there a chance to support autoadding new codepoints to the json file on first build?

The current "version": "0.4.0" of webfonts-generator includes "svgicons2svgfont": "^5.0.0", whose latest minor version is six months old. They're currently at "version": "8.0.0".

Worse still, "svgicons2svgfont": "^5.0.0" appears to be including "svg-pathdata": "^1.0.4", which is a year old. They're currently at "version": "4.0.1".

All this is important to me because bugs have cropped up for me in svg-pathdata while using icon-font-generator (which uses webfonts-generator) and I can't tell if the problems might be resolved simply by being up to date.

Same issue as documented here: cibernox/git-repo-version#21

Basically the package.json files property and .npmingore need defined.

Hi sunflowerdeath. First, thanks for making this library. It's been super useful for my team.

I'm curious if there's a philosophical or technical reason for not using the content hash as part of the type filenames but instead adding it as a query parameter. The former scheme is very useful for cache busting reasons.

I've already made a proof of concept here (just ignore the tab to spaces changes) that my team is in the process of vetting but obviously if I can work with you to integrate it into the main repo (maybe as an option), that might be a nicer approach for everyone.

Any interest in this?

Hi,
now i'm trying many hours to use cssFontsPath to modify the fonts path inside of the generated template and i don't get it work.
Otherwise, is there any way to fetch the file-hash of the font-file inside of the template to getting it work manually?

something like:

    @font-face {
        font-family: "{{fontName}}";
        src: url('../fonts/{{fontName}}.eot?{{hash}}');
        src: url('../fonts/{{fontName}}.eot#iefix?{{hash}}') format('eot'),
        url('../fonts/{{fontName}}.woff2?{{hash}}') format('woff2'),
        url('../fonts/{{fontName}}.woff?{{hash}}') format('woff'),
        url('../fonts/{{fontName}}.ttf?{{hash}}') format('truetype'),
        url('../fonts/{{fontName}}.svg#{{fontName}}?{{hash}}') format('svg');
    }

or can i attach an anonymous callback function to the src attribute, to generate my own?

I would be happy for some hints of you. Thank you in advance! :)

https://github.com/Workshape/icon-font-generator is a tiny wrapper on top of this package

and it has to parse the css to generate a json file: https://github.com/Workshape/icon-font-generator/blob/master/lib/index.js#L117

this feel like a hacky

I would like to generate a .js code like this one: https://github.com/entria/react-native-fontawesome/blob/master/FontAwesomeIcons.js

const Icons = {
addressBook: "\uf2b9",
addressBookO: "\uf2ba",
addressCard: "\uf2bb",
addressCardO: "\uf2bc",
adjust: "\uf042",
adn: "\uf170",
alignCenter: "\uf037",
alignJustify: "\uf039",
alignLeft: "\uf036",
alignRight: "\uf038",
amazon: "\uf270",
}

it could make it easier to make it work on React Native

Please support ligatures.

I followed the steps in Readme.

There is only one svg image in files, and code as below:

webfontsGenerator(
  {
    files: ['src/assets/icons/story-card.svg'],
    dest: 'icon-dist/'
  },
  function(error) {
    if (error) {
      console.log('Fail!', error);
    } else {
      console.log('Done!');
    }
  }
);

When I run, will return error, the error message is

Fail! Checksum error in glyf

Because of no license, we cannot use you

I am almost done with my WebPack loader for generating webfonts using this module. However, when running my test, it turned out that, for some reason, the file contents got totally swapped and mixed up. Here is the "generated" config within the only source file of the module.

https://github.com/IngwiePhoenix/fontgen-loader/blob/master/index.js#L32-L43

And here is what happens:

Ingwie@Ingwies-MBP ~/W/f/test $ webpack
Hash: 640abcea2ea033f3c1d0
Version: webpack 1.8.9
Time: 1002ms
                                         Asset     Size  Chunks             Chunk Names
 bf3348128669f5ef4f8405d22bf5a708-Octicons.eot   111 kB          [emitted]  
539e81463b37bb921e1861d5a8d2f66e-Octicons.woff  30.4 kB          [emitted]  
 ecd0bb310102b5d86e0379dda2e3a77b-Octicons.ttf  30.6 kB          [emitted]  
 0408f44d9d4f8b4ff1a3a6edd5214653-Octicons.svg  17.1 kB          [emitted]  
                                     bundle.js  21.8 kB       0  [emitted]  main
   [0] ./entry.js 59 bytes {0} [built]
    + 4 hidden modules
Ingwie@Ingwies-MBP ~/W/f/test $ file build/*
build/0408f44d9d4f8b4ff1a3a6edd5214653-Octicons.svg:  data
build/539e81463b37bb921e1861d5a8d2f66e-Octicons.woff: TrueType font data
build/bf3348128669f5ef4f8405d22bf5a708-Octicons.eot:  SVG Scalable Vector Graphics image
build/bundle.js:                                      HTML document text
build/ecd0bb310102b5d86e0379dda2e3a77b-Octicons.ttf:  data

I checked, bundle.js has the expected output. But the various font files, don't... Is there anything I am doing wrong in my code?

For some SVG files the generated font presents icons with low resolution and I can't notice why.
The following attachment is one of these situations.

Looking at its source code, everything looks similar to other SVG icons that are successfully generated.

Also, if you generate a font for the following icon using fontastic, it is successfully generated.

calendar.zip

I just discovered this tool and am pretty baffled why it isnt known like it should be. The potential of this tool is huge, so I am adding it to my project.

In order to support IE 7, since this is, for now, the lowest target I want to choose, one can use the following trick:

http://stackoverflow.com/a/15262501/2423150

Since you use templates, this shouldn't be too big to implement, and neat int he long-run.

Thanks for making this tool, I am going to work on implementing it with WebPack :)

Seems the webfont generation fails when trying to generate a font with more than 1334 glyphs ligatures. 1334 glyphs ligatures works fine, but when I try to add the 1335th glyph ligature, the final font product is corrupted (no error is produced during generation).

I should note that all my glyphs are generated as ligatures (using the svg filename).

Is it possible to run this command in terminal?

I tried rendering svg icons to webfonts, but I am facing issue for few icons which renders with a black background, however when I do the same in IcoMoon generator it works fine.

Original SVG:

As generated by webfonts-generator

As generated by icomoon

I tried to go with

formatOptions {
  svg: {
    normalize: false
  }
}

But no icons were rendered.
Any help here would be great.

When I give a full http/https url for cssFontsPath, its being changed to a single slash.I have css inline and generated font is on a cdn hence cannot give a relative path.

I am trying to automate my current icomoon workflow (= ditch it). After font is being generated I noticed that glyphs went through some hardcore normalization? It's not obvious in small sizes, but it's horrific after being scaled up.

This icon was generated by webfonts-generator:

And this by icomoon website:

And this is source svg:

<svg height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><path d="m16.007 27.4453c.259-.259.424-.573.511-.904l1.51 1.51c-.168.287-.361.562-.606.808-1.373 1.372-5.497 1.662-6.31 1.706l-1.112.06.06-1.113c.044-.813.332-4.937 1.705-6.31.245-.246.521-.438.807-.607l1.51 1.511c-.33.087-.644.251-.903.51-.438.438-.835 2.161-1.026 3.855 1.687-.188 3.404-.576 3.854-1.026zm11.2437-11.3843-2.688-2.688c1.401-.983 3.133-1.373 4.042-1.373h.028c.012.807-.364 2.608-1.382 4.061zm-5.171 11.799-1.829-1.829 1.829-1.829zm-6.072-6.072 7.071-7.071 2.828 2.828-7.07 7.072zm.415-3.243-1.829 1.829-1.829-1.829zm13.727-8.07c-.324-.325-.815-.475-1.545-.475-1.462 0-4.329.691-6.233 2.596l-3.95 3.949h-6.656c-.266 0-.52.105-.708.293l-.707.708c-.391.391-.391 1.024 0 1.414l11.314 11.313c.195.196.451.293.707.293s.512-.097.707-.292l.708-.707c.188-.188.293-.442.293-.708l-.001-6.657 3.95-3.95c1.438-1.438 2.072-3.293 2.321-4.27.202-.792.587-2.721-.2-3.507z" fill-rule="evenodd"/></svg>

This is my config:

{
  files: ['jsapp/svg-icons/deploy.svg'],
  dest: 'jsapp/fonts/',
  fontName: 'k-icons',
  cssFontsPath: '../fonts/',
  css: true,
  cssTemplate: './jsapp/k-icons-css-template.hbs',
  html: true,
  htmlTemplate: './jsapp/k-icons-html-template.hbs',
  types: ['eot', 'svg', 'ttf', 'woff2', 'woff'],
  templateOptions: {
    classPrefix: 'k-icon-',
    baseSelector: '.k-icon',
    baseClassName: 'k-icon'
  },
  formatOptions: {
    svg: {
      normalize: false,
      round: 0,
    },
    ttf: {},
    woff2: {},
    woff: {},
    eot: {}
  }
}

As you can see I tried configuring all possible formatOptions - only svgicons2svgfont has some useful configuration, but it doesn't help at all.

Hi,

We are using this awesome package to generate fonts in our ember app. Now we are trying to upgrade from 2.7.0 to 2.9.0, during the process we are getting error in scss.hbs with variable '@key'. In ember 2.8 they have disallowed using @ in hbs templates. So we need to update htmlbars version to 4.0.5 so that we can use |key value| set in templates.

I have seen pull request , on using which its working fine locally. But to make it working on production i need to fork your 'broccoli-webfont' and 'ember-cli-webfont'. Can you update htmlbar package in your package.json so that i don't need to do fork those libraries.

Thanks,
Hari

hello.

I'm using webpack, and this loader https://github.com/jeerbl/webfonts-loader. This loader uses webfonts-generator under the hood. And there's only one problem with the scss template - mixin webfont-icon, it doesn't write correct charcode (missing \ in "content").

I cloned the template and changed a bit in the code, and it works well. I think you can consider it as a workaround.

@mixin webfont-icon($name) {
	line-height: 1;

	$icon: map-get($webfont-icons, $name);
	$character-code: "\"\\" + nth($icon, 2) + "\"";
	&:before {
		font-family: nth($icon, 1) !important;
		font-style: normal;
		font-weight: normal !important;
		vertical-align: top;
		content: #{$character-code};
	}
}

As the title implies, the HTML template still requires the now deprecated 'baseClass' option. With the 'baseSelector' option, the generated HTML file renders incorrectly due to missing classes. As the 'baseClass' option is converted into a 'baseSelector' value, it now always fails.

Ex: output from previous version, using 'baseClass' = 'glyphicon':

<span class="glyphicon novaicon-add-circle-1"></span>

New version, using using 'baseSelector' = '.glyphicon' (or same 'baseClass' as before), outputs:

<span class=" novaicon-add-circle-1"></span>

When trying to run generateWebfonts({ files: ['/path/to/invalid.xml'], e => console.log(e)), the application explodes with an uncatchable error like

events.js:136
      throw er; // Unhandled 'error' event
      ^

Error: Unexpected close tag
Line: 7
Column: 6
Char: >
    at error (/path/to/node_modules/sax/lib/sax.js:651:10)
    at strictFail (/path/to/node_modules/sax/lib/sax.js:677:7)
    at closeTag (/path/to/node_modules/sax/lib/sax.js:871:9)
    at SAXParser.write (/path/to/node_modules/sax/lib/sax.js:1436:13)
    at SAXStream.write (/path/to/node_modules/sax/lib/sax.js:239:18)
    at ReadStream.ondata (_stream_readable.js:642:20)
    at ReadStream.emit (events.js:159:13)
    at ReadStream.Readable.read (_stream_readable.js:478:10)
    at flow (_stream_readable.js:849:34)
    at resume_ (_stream_readable.js:831:3)

I'm guessing an error is thrown within a stream, and needs to be caught with the 'error' event in node.

Can you please update the npm package?

I'd like to try swapping out ttf2woff2 with another lib since it requires node-gyp and getting that to work in my Docker build hasn't been going well.

Handlebars is a great templating tool. It is intended primarily (only?) for HTML templates. However, webfonts-generator uses it for CSS templates. This causes a number of issues;

• Values are HTML-encoded:
  • Complicated values like URLs need to use the triple-brace syntax to prevent HTML encoding of special characters, e.g. {{{sourceUrl}}} to render
    • "ba-icon.eot?0a8c3f7a188a221fd7bc7c97ccd91dc3?#iefix" instead of
    • "ba-icon.eot?0a8c3f7a188a221fd7bc7c97ccd91dc3?#iefix"
  • If using double-braces for simple values, template-rendering takes longer than necessary.
  • If using double-braces for simple values, double and triple braces are used inconsistently.
• IDEs try to format .hbs files as HTML templates, resulting in broken indentation. This is a real pain for projects with standardised auto-formatting IDE policies.

https://github.com/nfroidure/svgicons2svgfont

There are breaking changes and new features (ligatures, several codepoints for the same icon).

You may want to use the same logic than the CLI util and gulp-iconfont to parse unicode and icon names in the file names https://github.com/nfroidure/svgicons2svgfont/blob/master/src/metadata.js

I'm available if you have any question / require any help on switching to the new API.

Hi there,

I noticed the CSS generated by webfonts-generator does not include a fix for IE9 compat mode. As suggested in this SO answer, not only the ?iefix is needed but also a src only having the EOT font URL:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Could you test it out? Or tell me a version I can use myself to test it ;)

Thanks!
Jerome

Hi, i've been experiencing some rendering trouble with the generated font glyphs, i get this :

instead of this :

see the difference ? does it rings a bell to anyone ? Am i missing something ? For the records, the second image have been generated with an all integrated tool, like icomoon or other.

I guess this is a feature request.

My icons are different sizes. Some icons are square-shaped, some are tall, and some are wide. The font generator appears to standardize the icons based on height to all be of equal height but variable in width. It would be nice to have the ability to define a boundary (width:height ratio - eg a 1:1 square) and for all icons to be centered within the boundaries so that no icon is wider than all the others. A really wide icon would just appear smaller and vertically centered within the boundary.

Is this be feasible?

<style>
.pa {
	line-height: 1;
}

.pa:before {
	font-family: blitrip !important;
	font-style: normal;
	font-weight: normal !important;
	vertical-align: top;
}
.pa-caret-right:before {
	content: "\f110";
}
</style>

	<div class="preview">
		<span class="preview__icon">
			<span class=" pa-caret-right"></span>
		</span>
		<span>caret-right</span>
	</div>

I want to <span class="pa pa-caret-right"></span>, this is right, but have no 'pa' in class.

Do we have to specify single name for the svgs? It seems like it doesn't support glob pattern

files: './assets/svgs/*.svg',
dest: './assets/fonts'

Something like this would be amazing if i have more than 100 files, I don't have to add names

I believe you can use ttf2woff2 and add it to the generators config in generateFonts.js. Is there anything else to keep in mind? Let me know if you want me to send a PR.

On install I have the following error:

 C:\Python34\python.EXE -c import sys
  File "<string>", line 1
    import
         ^
SyntaxError: invalid syntax

I saw somewhere that it can be from my installed python version ....