Hi Sara, What does your @font look like? Does athelas not have quotes around it? I have found that simply adding '' (single quote) in the @font and font-family helps on IE and FF when using custom fonts.
.menu li::after { font-family: 'athelas', serif; font-weight:bold; font-size: 16px; content: “◆”; } Also are you sure that the eot and woff files have the same metrics as the OT or TT? font-squirel is a great resource for creating fonts. Make sure to use a desktop TrueType font or OpenType to create from. On their site it allows you to set the metrics to an even setting. https://www.fontsquirrel.com/tools/webfont-generator HTH Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On Jul 27, 2016, at 5:05 PM, Sara Haradhvala <har...@comcast.net> wrote: > > I set up this unicode in CSS > > .menu li::after { > content: “◆”; > font-family: athelas, serif; > font-weight:bold; > font-size: 16px; > } > > My problem is that the diamond is much bigger in IE and somewhat bigger in FF > on Windows. All looks good on Mac browsers and Chrome on Windows. IE seems to > generate a full-height diamond (which looks overwhelming), while other > browsers have space around the icon and it’s much smaller (and looks better). > Any way around this? Would you use an svg instead? > > Thanks. > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/