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 <[email protected]> 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 [[email protected]]
> 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 [[email protected]]
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/
