I'm working on a project, which is a bilingual project. There are beautiful fonts for each language (I'm talking about free fonts). However, in any special case, only a subset of each font is suitable for me. For example, for titles and headers, one font is good, while for regular text, another font is more legible. For numbers in one language, one font is awesome, while when the language changes, glyphs of the other font make more sense and harmony.
What I have in mind, is to extract glyphs from each font (required glyphs) and create one unique font which is lighter than all of those fonts, and embed it into my website, so that user agents can download it.
I reckon the compiled font to be easier, because each font contains many characters that I actually don't want to use. For example, each font may have something around 400 glyphs. However, I only want something around 200 glyphs in total (36 glyphs from one font, 45 glyphs from another font, etc.)
However, I'm not sure this method work, and my question is, how should I do this?
@font-face
CSS at-rule to embed fonts. :)