Merging multiple font files within one @font-face

Question

I have the following code:

@font-face {
  font-family: 'icomoon';
  src:url('../fonts/icons/icomoon.eot?2hq9os');
  src:url('../fonts/icons/icomoon.eot?#iefix2hq9os') format('embedded-opentype'),
  url('../fonts/icons/icomoon.woff?2hq9os') format('woff'),
  url('../fonts/icons/icomoon.ttf?2hq9os') format('truetype'),
  url('../fonts/icons/icomoon.svg?2hq9os#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

now, the problem is that I'm forced to use multiple icon sets (from multiple files) and for my convinience and clean structure I want to have all those icons (from all the files) only within the one 'icomoon' font-face.

For example if:

../fonts/icons/icomoon.* includes icon-1 / icon-2 and icon-3

and 

../fonts/icons/customicon.* includes icon-4 / icon-5

how can I include all of them to have within the

@font-face {
  font-family: 'icomoon';
  -- include multiple files --
}

div#selector { // will have con-1 / icon-2 / icon-3 / icon-4 / icon-5
  font-family: icomoon; 
}

is that possible at all?

score 2 · Answer 1 · answered Jul 18 '14 at 08:27

2

I think that for this purpose you could use IcoMoon PLugin. With it you can create a custom font combining FontAwesome with your icons and much more.

answered Jul 18 '14 at 08:27

faby

7,394
3
27
44

yes, that's true - but what i'm looking for it to do it within the styles. Nonetheless your answer is helpful. – Oskar Szura Jul 18 '14 at 08:30
@OskarSzura did you look http://stackoverflow.com/questions/10254331/tools-to-create-an-icon-font? – faby Jul 18 '14 at 08:36
it brings nothing to the 'merging' issue - at least in my opinion – Oskar Szura Jul 18 '14 at 08:45

Merging multiple font files within one @font-face

1 Answers1