![]() ![]() ![]() You then need to include these files in your CSS, as demonstrated in the file linked above. which will give you your EOT, SVG, TTF and WOFF font files, which should cover you for almost all browsers. When you're done and you have your TTF font as you want it, you need to convert the font into the many different formats needed to use as a web font. I've checked enough to see that FontForge can import SVG, I haven't tried it though). If I need to do my own icon fonts in future I'll probably use Inkscape and FontForge though. On our team one of the guys uses a proprietary Mac App to come up with the font. ( Disclaimer: I haven't done this part of the process. If you want to do your own TTF, you could, but just take a look and copy how they did it I guess. If you look at their code, you can see how to run the CSS:Īnd if you want to edit the fonts, download FontAwesome.ttf and edit in FontForge. Here's an open source example of what you're looking to do: The zip file you download will contain precise instructions on how to implement the fonts into your web project.Go to or a similar service to upload your TTF file and get it converted (and corrected).In the main window, choose File > Generate Fonts and save to TrueType (ignoring any errors).* **Weight**: Book (Win XP thinks medium = bold, so best to use Book) In the main window, select Element > Font info. Back in FontForge, once you've added all of your icons, you need to give your typeface a name.* Undo all, then break icon apart and redraw/trace/correct the problem area. * The resulting shape will probably be missing a part of your icon. * In Inkscape, remove the fill of the icon. There's an easy way to find out the problem that should work in most cases: If the import registers errors and the wireframe looks like its suffered a mild explosion, you'll need to go back to Inkscape to sort out the path.In this new glyph window, choose File > Import and select one of your SVG files (you'll probably need to change the file filter in the file dialogue to show SVG files).In the main glyph display list window, double-click one of the letters/numbers you have an icon for.Once you've made an SVG file for each icon, open FontForge and create a new FontForge document.This way there is size and position consistency across the icon set (and you don't have to keep choosing the directory to save your plain SVGs). I'll often leave this plain SVG document open, pasting in new icons and centering and sizing according to the last. Save the drawing as a plain SVG (it's easier if you title according to the letter to be assigned eg.Centre the icon on the page using the Align tool (if appropriate).Resize the icon to fit the space provided (although it may be best you resize all icons in the original design document first - up to you).Paste an icon from your design into the new document.Create a new document by selecting New > fontforge_glyph. ![]() If there are problems, you can always refer back to this base file to make initial changes to the shapes.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |