Tools to create an Icon Font [closed] - css

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I'd like to create an icon font for use in a web application. fontAwesome, Iconic, fontomas are examples of what I'd like to do but I need to use custom icons. I'm not sure where to start. Any help is appreciated.

If you haven't seen it already, my web app could help you generate icon fonts: http://icomoon.io/app
You can import your own SVGs, or browse the icon font library: http://icomoon.io/app/#library

Inkscape is a great free application for creating graphics with vectors (what modern fonts are made of).
FontForge is a great free application for creating fonts, and can import SVG (a great free vector graphics format) from Inkscape.

Despite what narkeeso said, a font only has one baseline. All of your icons should sit on that line to be consistent. Some icon fonts try to center the icons vertically but this causes more problems than it solves and you can always adjust the vertical position of the icon relative to surrounding characters using the vertical-align property.
I tested the baseline in the template heavily for that article and it is very successful across browsers. You may wish to match the X-height to a common font like Arial, however. This can be done in the Font Squirrel converter.

Rob, you can start here.
It's not the best example and the template it speaks of is a little bit out of date. You'll have to experiment by moving your icons around the canvas depending on your font baselines.
There's also this long post where he imports his vectors into FontLab. Drawbacks of FontLab are it's $649 price and it's learning curve is steeper than Inkscape. I also found FontLab to be buggy on my OS X install.
On a side note:
Someone needs to make software dedicated to this task...

ive been using an app called glyphs (http://www.glyphsapp.com/) to create typefaces, and recently had a go at an icon font for web use. i imported glyphicons as they come with bootstrap to see what the metrics were they used. so at 20px fontsize theyd match the grid best. etc etc.
i have a custom script to export a css file that creates all classes with the attached unicodes. and another python script that asignes unicode values to custom glyphs (some icons are actually part of unicode, like camera, bell, and things like that)
after that i have to use font squirrel for web font conversion tho,
i have been in touch with the developer who said that he was implementing webfont export. updates are free, but he has not included direct webfont export yet.
so its always a bit of a hassle to get the font out of the app into the browser.
but i certainly have streamlined a few factors.
fontlab is not as userfriendly and i cant recommend it mainly for that reason, but also price. glyphs offers a mini version for 40€ that should cover the functionality needed for icon generation.

If you need font icons, this app is very good: http://fontastic.me/

Related

SVG as icon font alternative

For my current workflow I use iconic web fonts generated with the Icomoon. It’s a very easy and fun technique with an obvious advantages:
Icon behaves just like any other glyph, so any text CSS transformations can be applied to it in a natural way, like text-shadow, text-decoration, color etc.
Easy reuse, just add necessary font-family to element.
But it has major flaws do not let me sleep.
Font icons are blurry no matter how perfectly its curves are aligned to a pixel grid. Not to mention awful Windows rendering.
It’s hard to add new icons to the font, especially when vector source font is made from is not available and even lost.
It requires bunch of different font versions (woff, eot, ttf) for acceptable cross-browser support.
In the end fonts are not really for graphics at all (especially not monochrome), it seems to not the right way to use dummy empty and non-semantic <span class="icon"></span> for this purpose.
Well, the obvious alternative is SVG, which has no mentioned disadvantages. But has it’s own flaws, which do not let me use it’s easily.
A lot of small files are quite simply not acceptable in our HTTP/1.1 era.
Creating of icon modification is not an easy task and requires manual editing, which is also rather strange for our just-type-npm-install era.
I've googled for some npm packages which hasn’t satisfied me for some reasons.
So, I’m asking your advice how to manage this trivial and routine task. Is there productive and reliable way to generate SVG sprites with modified variations of original icon and bitmap fallback for old browser?
It doesn't make sense to talk about "supporting old browsers" without:
knowing what the majority of your users will be on (which'll be multiple browsers of course), and,
what support for the feature you want to use is for those browsers, for which we can use the handy http://caniuse.com
With that said, this is not going to be an answer so much as an explanation of how all those points you present "against" fonts are unfounded. Answers are great, but in this case we need to set the record straight so you can make real decisions based on facts, instead of (either "never", or "no longer" valid) preconceptions. I spent way too many years of my life working with fonts from an engineering perspective to let you maintain these claims =)
"Font icons are blurry no matter how perfectly its curves are aligned to a pixel grid. Not to mention awful Windows rendering."
This is plain old not true. As vector graphics, if they render poorly, SVG will also render poorly at the same size, although SVG will typically render worse: fonts actually allow for micro-outline-optimizations for dealing with small point sizes (.otf is better at this than .ttf, but the font maker needs to have spent the time to put them in. Pretty much all professional fonts come with that work done), and SVG doesn't, because it has no instructions in its vector graphics language to do so. As such, fonts render either on par with (if they have no optimization instructions), or better than (if they do) SVG.
For example, Font-Awesome comes with outline optimization that allows it to render pixel-perfect all the way down to a font size of 14px, which is already smaller than what browsers use as default size for text on a page (virtually all browsers agree to use a default of 16px serif). If you took its icon set and converted it to SVG, then tried to use those scaled down to match a 14px size, they would look an absolute blurry mess.
Or you can use an icon set that goes further, such as Symbol Set which has explicitly been designed for grid alignment, which means that even at sizes lower than intended, it still renders remarkably crisply.
SVG loses here.
As for Windows rendering, it might look bad, but that's not Windows's fault. Both Uniscribe and DirectWrite are really good at rendering fonts. Like, really good (which may not be a surprise, since Desktop Publishing has traditionally been Microsoft's core business since pretty much its beginnings, although that's shifting). Browsers that hook into them render fonts really well: IE has even supported web fonts since IE4... That's 1997. That's before HTML4 was even a thing, we were still on HTML3.2 at the time.
The problem isn't so much "Windows", as it's "older browser that are not IE, on Windows". Browsers didn't really care about web fonts for a very long time. It's only the last few years that major effort has suddenly gone into making sure they come with good Font shaping engines (like Harfbuzz, which is now used by Firefox and Chrome), and you won't get nice results for Fonts unless you're using a modern version of "not-IE" on a Windows machine.
And then finally a problem specific for "font vs SVG" on Windows and IE: While IE has supported web fonts since pretty much forever, SVG support only landed in IE9, so if you need to support IE8, you can't even use SVG. In the case for this very specific target audience, "fonts vs. SVG" isn't even a question, you have to go with a font.
"It’s hard to add new icons to the font, especially when vector source font is made from is not available and even lost."
No it isn't, you're still using HTML with CSS, so do what we always do when we need "letters not in this font": use font-fallback: font-family: iconfont1, iconfont2, iconetc.
"It requires bunch of different font versions (woff, eot, ttf) for acceptable cross-browser support."
Not for a few years now. These days we do not need multiple sources: caniuse shows us that everything supports WOFF and has done so for a few versions.
Even IE, although if you need to support IE8 you'll have to also find yourself an .eot (which is literally just a ttf file with an extra bit of metadata so IE will accept it... just like WOFF!) and then live with the fact that if this requires a conversion from otf to eot, you're going to end up with a shitty font because it's a lossy conversion (like converting .png to jpg. Excellent conversion software can generate a decent result, normal software will generate a mediocre result).
And because everything supports WOFF, we (thankfully) don't need ridiculous all-encompassing sets of ttf+otf+eot+woff+svg anymore, with a "bulletproof" #font-face rule that tries to optimize load order so not too many files are needlessly loaded - just use WOFF. Done. And in a pickle, add .eot as first source (with format indicator) and everything except IE will skip over it.
It's also worth looking at SVG font support: virtually nothing supports it, and those that do are in the process of deprecating it. SVG fonts as a thing has been discontinued because the results of using SVG fonts turned out to be incredibly much worse than using real fonts, underlining the explanation on point 1.
"In the end fonts are not really for graphics at all (especially not
monochrome), it seems to not the right way to use dummy empty and
non-semantic <span class="icon"></span> for this purpose."
Both of these claims are incorrect.
Fonts are for encoding vector graphics that are to be used in typesetting context. That can mean letters, or icons, or emoji; it can even be musical notes or mahjong tiles. And the way they do this has until very recently been as "single color", which is literally what monochrome is. The only place where monochrome rendering for fonts might be a problem is on monochrome monitors in which case: where the hell are your webpages being accessed that they can render webfonts, but do so on ancient-even-for-CRT technology O_O
As for semantics: if you need an icon that has no meaning inside the document and is purely UI candy then you do want a non-semantic element, so that text readers and the like for people with visual or reading disabilities don't get your icon read out loud to them, and text indexers for search engines (private or public) can safely ignore them entirely. Your icon should definitely be a non-semantic empty element that can be skipped by everything.
With all that said, what about bitmaps?
Bitmaps absolutely win at low point sizes, but—and this may be a surprise—fonts can actually contain embedded bitmaps so that they can render actual bitmaps, not vector graphics, at small point sizes.
Of course, only high grade fonts come with those, but that's also a thing you check for: does the icon font you're looking at come with bitmaps? If so, we have a winner. If not, then you might want to take the icon font you want to use, generate your icons as a bitmap file, and then manually clean up the bitmap before using it on your site.
This process is inherently manual, no utiltiy will do this for you and not get it wrong enough times that you still need to manually fix things up, but if you do go down this route, and you make your own icons based on a well known font, at a point size that makes the icons look better than the font rendering: give back to the world and send those bitmaps back to the font creators so that they can use them to build out the font's EBLC, EBDT, and EBSC tables and everyone else gets to enjoy having the bitmaps live inside the font, so we don't need to do crazy CSS sprite rendering.

How to make custom css fonts render exactly like designs

I'm working with some really great designers. In translating their design, they are asking me why sometimes we don't render non-system fonts exactly as depicted in their designs. A very recent example can be shown in the image attached to this question (ignore red annotations):
I'm using fonts from fonts.com via a javascript include, which allows me to utilize new font-family in my css. I want to draw your attention to two things:
a) On the left, notice the description text "In an effort to ..." is much bolder than "Lorem ipsum ...". Font is "Droid Serif W01 Italic".
b) On the right, notice "MEET ONE" is much bolder than "COMMERZBANK". The font family is "UniversLTW01-57Condense 723821".
I made sure font-weight:normal. And yet, things still look bold on some computers...and it seems to vary depending on which OS and browser you are on. It seems like the only way I can modify the weight of these fonts in an aesthetically pleasing way is by choosing another variation of the font family like the oblique or condensed version (if they exist). But often times, I still can't get the weight to render properly on all the different OS and browser combinations.
How do you guys address these issues? Are there techniques I can use to make the fonts render exactly as depicted in designs regardless of the viewers operating system and browser?
From my experience I always find that font-rendering on the web is nowhere near as good as it is in Photoshop or other design tools. This usually leads to problems like this.
In Photoshop, a designer can use "extra" settings like: "Sharp", "Crisp", "Smooth" and "Strong". All of these variants make the font rendering much nicer. These attributes are not available to us as developers though.
It all comes down to the anti-aliasing of the fonts which all browsers implement in different ways. It is impossible to get fonts to render in the same way across all browsers. This is a reason to use only fonts which are specifically created for the web since they are designed to have good anti-aliasing on screens in the most common sizes.
There are however, some tricks you can try. I have little to no experience with them but hopefully my background answer and these links will give you inspiration in where to find more information about this complex issue.
To me, the left image looks like a classic anti-alias problem. The right picture, I'm not so sure. It almost looks like another font and the size should be big enough for it to render properly.
Check these links out if you wish to read more, hopefully they can be helpful:
Does CSS support text anti-aliasing such as "crisp, sharp etc" yet?
How to do font antialiasing in web page?
Webfont Smoothing and Antialiasing in Firefox and Opera
http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
"The #font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, #font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The #font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule." -MDN
#font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
https://developer.mozilla.org/en-US/docs/CSS/#font-face
Its not a perfect solution, but it may get you closer to where you want to be.
We face the same problems you raised and I won't duplicate the good information that's already been covered here. Anti aliasing and CSS are just a part of the picture. So I wanted to touch upon how the typeface foundries and licensing can figure into things.
On the PC side, the reality of webfont services like fonts.com and Typekit usually means results that are noticebly worse. That's regardless of browser.
When you're using a webfonts service you're at the mercy of how that service handles font embedding.
However, if you're using a font that's optimized for web usage and it's available for purchase where you can directly control the embedding of the font files yourself, this article has an good tip to improve rendering on Chrome for Windows.
Examples of foundries that sell (or Google Webfonts at no-cost) fonts for direct embedding are FontSpring, MyFonts, Commercial Type, etc.
Hoefler Type just debuted their own font service that renders beautifully on the PC. It's similar to fonts.com and Typekit in the sense you don't host or embed fonts directly. They've went to an unprecedented level to address all the common issues with webfonts. They adjusted the scale of their font weights and customized their deployment for individual browsers. The limitation is, like many other foundries, as of now you can only buy their typefaces.
Because of these complications we'll usually consider the options for web usage of individual typefaces early on in a project.
From personal experience and high-level research I found that you can come close to achieving a pleasant result using either sIFR (Scalable Inman Flash Replacement) or pure javascript alternatives like Typeface (http://typeface.neocracy.org:81/) and Cufon (http://cufon.shoqolate.com/generate/). I have been using Cufon for a while and I find it the easiest and most effective way to get close to the results you are looking for at the moment. Hope that helps if you still havent come across those solutions yet.

How can I convert .svg files to a font? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question would be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.
Closed 2 years ago.
Improve this question
How can I convert .svg files into a font? Is there any API or programmable method?
I found two relevant answers here on Stack Overflow:
Creating icon fonts with vector software (i.e. inkscape) and fontforge?
Tools to convert svg to ttf [closed] (archived from this deleted SO question)
Unfortunately, neither is really a coding answer, which is what I had really hoped for (a command line utility for scripted conversion or perhaps an API with which somebody could write such a thing).
Still, I got what I was looking for by combining those two answers.
Clean up SVG
(This step might be optional.) Open up your SVG in the free software program InkScape. Copy the existing SVG and create a new project from the FontForge Glyph template. Paste into that template, standardize the look, size, and position, and save as PLAIN SVG, one file per character ("glyph").
Convert SVG to font
Then, either use the free software program FontForge directly (as directed in the first answer, creating icon fonts with vector software) or else use the free IcoMoon online service (as directed in the second answer, tools to convert svg to ttf). I did the latter.
Using IcoMoon
IcoMoon is a rather straightforward tool. Click the purple Import Icons button on the top of the page to import each of your custom SVG glyphs. Then click "Get Info" on the set's preferences so you can name the set and give it some metadata. Use the "Edit" tool (the pencil icon) and click on each glyph to get the sizing and spacing just right.
When you're done, select all of the glyphs you want in the font and then press the "Generate Font" button at the bottom of the page. On the resulting screen, you can then map each glyph to a unicode character. On the right side, you can type or paste a character, or on the left side, you can enter its hexadecimal code. A program like GNOME Character Map (for Linux) or Windows Character Map or Mac OS Character Palette may help you find appropriate codes for your glyphs.
Now press the "Preferences" button at the top of the screen (or the gear at the bottom right) and finalize the name and metadata of your new font and press the "Download" at the lower right. You'll get a Fontname.zip file that contains a bunch of usage suggestions as well as the font files themselves.
Iterate
I found the sizing and spacing was really hard to get right (I was making letters). I kept iterating on IcoMoon, installing the font, and comparing my letters to letters in a similar font (using a word processor). Sizing was easy to get right, but spacing was not so easy (and I wasn't even messing with ligatures or kerning!). Don't forget that some systems require flushing the font cache after installing a new font (on Linux, that's fc-cache from Fontconfig)
Validate the font
You may also want to validate your font. Font Squirrel is an online service that lets you do that, offering corrections as well as usage tips. I think IcoMoon already does this, so perhaps that's only of use for FontForge creations.
There are multiple online tools that allow you to upload SVG files and use those as icons for creating an icon font. Personally, I prefer the Icomoon App.
The Icomoon App allows you to do each of the following :
Get one or more icons from several popular icon fonts
Upload other fonts, which may be icon fonts but also regular fonts
Upload SVG files to use as icons
Combine any number of icons from any number of available fonts
Set the UNICODE hex value for whichever characters you need
Export and/or save the font set you create
As others wrote, it is possible to import svg shapes into fontforge and some font designers work this way.
However, shapes (outlines) are only one part of a modern smart font, so that won't be sufficient in itself. You also need to work on metadata, kerning, hinting, etc. That's a lot of definitely not-fun, hard, but necessary stuff, while would-be font designers usually dream about ego-rewarding artistic drawing and not much else.
That's one reason svg fonts never caught up as a format, they're missing too many parts to be useful to render text.

Modern trends for web designing: help me choose a font-family [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 6 years ago.
Improve this question
I want someone to recommend me fonts that are "in" now-a-days and should be available on most platforms. You see, I am a web-programmer and not much of a web designer. I am asked to use serif fonts.
I'd second the recommendation for the SitePoint font stacks article already mentioned, and also point out that typography is more than just picking the right fonts - there are a couple of excellent articles recently published that are well worth a read:
Typography is the backbone of good web design
Jason Santa Maria's On Web Typography
It's also worth mentioning that css3's #font-face is very usable these days with surprisingly good browser support (See CSS At Ten and Typekit for more info, and the excellent modernizr javascript library to help with cross browser (that is IE) support).
I have found 8 Definitive Web Font Stacks by Michael Tuck a good read to start with.
I'd generally steer clear of serif fonts as I don't think they work too well for web content. Having said that, Georgia isn't too bad as a choice if it's got to be serif.
Try pairing serifs with sans-serifs. For a classic pairing consider georgia for headings and verdana for body text.
You might also want to check out Type Kit if you would like to use non-standard fonts without having to use Fahrner image replacement to display non-standard fonts.
Futura is Great font to make your Design look's Great. You just have to know how to use it. it also depend on what kind of design you are working on. Futra and Circular are the fonts you need to use.

What are good web development fonts? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am searching for a list of fonts I can use in CSS. Since these fonts may be copyrighted, which fonts should I use that are available across Windows (as of XP), Mac OS X and, say, Ubuntu 8.04?
I don't want to rely solely on the newer OSs.
A great bonus would be if the same fonts existed on mobile devices.
See this list of browser safe fonts.
It's Windows+Mac centric, but still applies. They do include a linux distribution screenshot, as well.
Here's some required reading:
Safe Web Fonts
Common Fonts
Also some related questions on StackOverflow:
What is the most readable, appealing font?
Font (typeface) selection for the Web?
All about choosing the right font for a website
The only 100% safe way to declare fonts is to use generics as fall backs.
The generics are:
'serif' (e.g. Times)
'sans-serif' (e.g. Helvetica)
'cursive' (e.g. Zapf-Chancery)
'fantasy' (e.g. Western) (wtf?)
'monospace' (e.g. Courier)
From the W3C
All five generic font families are
defined to exist in all CSS
implementations (they need not
necessarily map to five distinct
actual fonts). User agents should
provide reasonable default choices for
the generic font families, which
express the characteristics of each
family as well as possible within the
limits allowed by the underlying
technology.
Fonts such as Arial and Verdana which many web designers take for granted may not be present on Linux browsers (even firefox on centOS from experience). Apple has most of the Microsoft fonts but there are some which are absent.
Typetester!
Features:
compare fonts side by side;
choose from the list of safe fonts, win fonts or mac fonts;
all from the browser.
Just remember: Friends don't let friends use Comic Sans.
(Seriously, you've got good answers above already...).
Verdana is a good one.
CSS allows you to use any fonts installed on the system. font-family allows you to list many fonts. If the parser doesn't find the first one installed on the system, it moves onto the next one. That's why most font-family definitions cascade down to sans-serif or serif. If the browser doesn't have any of your fonts, it uses the default serif, sans-serif, or monospaced font, etc.
If you're a sucker for typography, unfortunately until CSS3 fonts take off you're going to have to live with serving up all the good fonts to your Mac users, since Mac OS X has a far greater selection of great fonts installed than Windows. I get a little depressed when I load up my sites on Windows and I'm greeted with a pile of rigid, aliased fonts.
Here's a guide...
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
As for mobile, all I can say is good luck! My daughter got my Blackberry from me for five minutes and changed my background, ringtone, and now all my fonts are cartoon fonts.
Here's a list of iPhone fonts, but it maybe slightly out-of-date. http://daringfireball.net/misc/2007/07/iphone-osx-fonts
You could use sIFR for headers and not worry about web-safe fonts at all. Take a look at the example page. It's pretty awesome.
Arial is my "safe" font that I use all the time.
But I've been using Trebuchet a lot lately. It's common enough that practically everybody is going to have it. It's used all over the place at StackOverflow, FeedBurner, and a lot of other popular sites these days.
But, just in case the user doesn't have it, I'd use CSS like this (just like StackOverflow has it)...
font-family:Trebuchet MS,Helvetica,sans-serif;
I'd recommend using web fonts if you desire layout consistency and complete control over the fonts rendered for your site. Here are some web font services to check out:
WebINK - No longer offered
Google Web Fonts
TypeKit
Fonts.com
All of these services provide thousands of high-quality fonts. Google fonts are totally free. WebINK and TypeKit both require a subscription model. I've never used fonts.com but they probably have a similar model.
Here's a nice article about typefaces for the web.
A lot of fonts are available from modern browsers. However, keep it simple and a little large. Also, use contrasting colors for easier reading.
While having such a list is certainly useful, you should also take advantage of the fallback mechanism of CSS. For example, you can list Consolas, Courier New, monospace in your font-family attribute and get the best possible match on that device.
The last item on each font-family list should be a neutral one such as "sans serif", "serif", "monospace", etc.
This way, your designers can use fonts they think best, as long as there's a reasonable downlevel experience.
See, for example w3.org's guidance
You're pretty save with Helvetica/Arial (yes, I know there's a difference!) or Verdana for sans-serif or Georgia or Times for serif. In your css you can just put a list in your preferred order. You should always end in a generic font-family to cover all your bases.
My sites usually look something like this:
font-family: Helvetica, Arial, sans-serif;
font-family: Georgia, serif;
If you want to get cute and fancy with your typography, you should look into SIFR, which uses flash to embed special fonts.

Resources