Previous Message
Next Message

rendering of icon in Windows browsers

Sent by Karl DeSaulniers on 27 July 2016 23:11

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-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.



Karl DeSaulniers
Design Drumm

> On Jul 27, 2016, at 5:05 PM, Sara Haradhvala [EMAIL-REMOVED]> 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-REMOVED]]
> List wiki/FAQ --
> List policies --
> Supported by --

css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
List policies --
Supported by --
Previous Message
Next Message

Possibly related: