12

updating fonts to existing fonts

I’m already using 5 icomoon fonts in our website which was downloaded from icomoon. I want to include 2 more fonts. What should I do?

Can I add the new 2 fonts to existing fonts? If yes, How can i add them?

user1139928
  • 131
  • 1
  • 1
  • 6
  • I've solved this problem here [Icomoon selection.json, add new icon for existing project](http://stackoverflow.com/questions/40114483/icomoon-selection-json-add-new-icon-for-existing-project/40133727#40133727) – Palaniichuk Dmytro Oct 19 '16 at 16:27
  • Check how I've resolved this issue here [Icomoon selection.json, add new icon for existing project](http://stackoverflow.com/questions/40114483/icomoon-selection-json-add-new-icon-for-existing-project/40133727#40133727) – Palaniichuk Dmytro Oct 19 '16 at 18:49
  • I'll show you an easy way to use Icomoon fonts on your website and add the style you want. Use this link to for adding more icon to your website: https://stackoverflow.com/questions/55998838/how-to-use-easily-icomoon-icon-to-website-change-colour-of-icon-and-adding-more/55999027#55999027 – PLB May 06 '19 at 06:18

6 Answers6

11

I'm assuming you want to add new "icons" to your existing fonts. The font pack that you download from IcoMoon comes with a "selection.json" file. If you have this file, import it to the IcoMoon app using the Import Icons button. After doing so, you can select more icons to generate a new font.

If you don't have access to this "selection.json" file, you could import your SVG font using the same Import Icons button. The downside in this case is that you may need to add your glyph names again.

Anonther way to save/load previously created fonts is using the project manager: Main Menu > Manage Projects. You may want to download your project so that you can load it back later.

More info: https://icomoon.io/#docs/save-load

Keyamoon
  • 1,785
  • 17
  • 16
5

at present icomoon does not allow you to import .ttf files. but it can be done using a svg, use services like http://freefontconverter.com/ to convert your .ttf file into an svg, once it is done you can import the svg file it in your current project and add more icons to it.

Vaibhav Soni
  • 106
  • 2
  • 2
5

go to the icomoon site, click on the icomoon app, click on the import button and import the old icomoon.SVG file which is in your code you can see all the icons which are in that file in icomoon site once import is done and also import new SVG or select from already existing icomoon list which you want to add to the existing list, select all(i.e old icons which are already there and new icons which you want to add to the existing list) click on generate font and then download that file, extract it you can see fonts folder copy all the files in that folder and paste it in your code(I mean replace the existing files in your code with this files) and you can see styles.css folder in extracted icomoon zip there you can see newly generated classes, copy those newly generated classes and paste it in your code where other icon classes are present

Gali Rohith Reddy
  • 61
  • 1
  • 4
1

Not sure if this has been resolved yet as it's an old question but there are a few approaches you can take depending on what you currently have available.

Ideally you will still have the selection.json file from when you first downloaded the first 5 icomoon fonts. If not you might still have the project stored in your browser. If so then you will have the current 5 fonts as is with all the settings and class names the same.

If you are able to get that great then you will only need to add in the code for the two new fonts. To add the two new fonts you can import the entire font file for both to IcoMoon by selecting the svg version of the font. Then add it to your existing font that has the original 5 fonts and you should be good to go.

The key is restoring the original 5 so work doesn't need to be repeated to get everything back to as it was. If you can't do this than it is probably easier to add the 2 new fonts as a new project in icomoon and just condense those 2 fonts into 1 new icon font.

I have some information on the basics of icomoon and importing projects here: http://stephentvedt.com/2014/04/03/using-custom-icon-fonts-icomoon-quickstart/

Stephen Tvedt
  • 326
  • 1
  • 5
0

As an alternative;

If you have an existing TTF (True Type Font), use for example font-converter.net to convert the TTF to SVG. In IcoMoon you can now click "Import" to bring back your icons/characters by importing the SVG file, and add icons as you see fit.

In case you're looking at another font format (under MacOS, TTC for example), then first consider converting it to a TTF (this worked for me: transfonter.org).

Note: I'm in no way affiliated with either websites. I tried Vaibhav Soni's suggestion first, but that website seems no longer working properly.

Also note that certain fonts are commercial and/or have copyright limitations, so you should not use those fonts in this fashion.

Hanzaplastique
  • 564
  • 8
  • 13
0

The correct way, You should import all previous module icons and new icons. Then generate fonts and replace the fonts folder and style.css file directory in your code.

Minh Hải Bùi
  • 1