![]() ![]() A list of font-face bugs that may be helpful. A video tutorial on using Chromes website inspector to troubleshoot your webfont issues. Here are some guides to help make the process a bit easier: A tutorial on installing web fonts. To get the font into the page, use the syntax and then add the characters with CSS generated content to avoid polluting your markup. Getting web fonts to work in your website is completely different than installing desktop fonts. ![]() Once all the characters are bound to keys, run through the conversion process mentioned before. For more on the process, reference this article and this video. ![]() Each icon needed to be saved as an SVG file, imported into Inkscape, properly resized and positioned on the artboard, run through a specific set of transforms, and then bound to a key. Building the fontĪrmed with my collection of icons in an Adobe Illustrator file and Inkscape, I began the tedious process of creating the font. If you’re still not sold, check out Chris Coyier’s “Icon Fonts are Awesome” page. Icon fonts have excellent browser support (all the way back to IE4), they can be styled with CSS, their styles can be changed on CSS events, they don’t pixelate, and they’re easy to adjust (sure beats resizing a sprite and modifying the accompanying CSS!)ĭepending on how many characters you include they can be very small in size, potentially smaller than all the icons you’d otherwise need to transfer over the wire. Then I can convert the SVG font to TTF through an online service, and then use FontSquirrel’s generator to get all the formats I’ll need for web embedding. Designer Aaron Robbs and I have been wanting to make an icon font for a while now (think Pictos), and I realized that instead of sprites, and icon font might be a better tool for the job at hand.Ī Google search led me to Inkscape, which allows me to create an SVG font. While doing some fun stuff at work, I found myself needing to make a sprite for 50+ icons. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |