search

incuna / incuna-sass

Incuna's Sass Library
MIT License
2 stars 2 forks source link

update font-face mixin to allow weight and style to be set properly #91

Closed hippogriffic closed 7 years ago

hippogriffic commented 7 years ago

Essentially it would appear that we've been doing this the hard way for years. It's possible to set font-weight and font-style in the font-face mixin as long as it's done in a specific order. Font-family must be first, then src, the font-weight and font-style can be set. This will mean we no longer need to use the font mixin to set fonts each time we need to change the weight or style. We can simply use font-family to set the web font family and then change the weight and style as needed on child elements with font-weight and font-style

This will be a big change that will break all our old projects so please DO NOT MERGE until we've discussed.

@incuna/frontend

if you're concerned about faux bolding I tested a LOT and here is proof from chrome using this new mixin and setting font-weight and font-style: image

from illustrator: image

pandalion commented 7 years ago

@perry as you originally set up the font face mixin for us just wondered if you had any opinions on this/anything we're missing? :)

hippogriffic commented 7 years ago

this should be ok to merge now if everybody agrees? it'll be a breaking change, but I've tested locally and it works beautifully

@incuna/frontend please

pandalion commented 7 years ago

sold on "beautifully" :D

hippogriffic commented 7 years ago

woo yay

henrahmagix commented 7 years ago

@hippogriffic Regarding the new incuna-sass font-face: I remember using that setup for eDetails years ago, but knowing we could only use it for eDetails, that WebKit was the only thing that would run them correctly. Turns out it's called Style Linking.

I can't seem to find any information that really corroborates that, but maybe it was due to the IE 7 & 8 restriction explained here: https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/#style-linking

PROBLEM: INTERNET EXPLORER 7 AND 8 CAN ONLY APPLY UP TO FOUR WEIGHTS AND STYLES TO A SINGLE FONT-FAMILY NAME LINK Style linking works — as long as you’re not using more than four weights and styles (and as long as the person reading your Web page isn’t the one of the one in eight people who still use Internet Explorer (IE) 7 or 8). If you use more than four weights and styles on the website, then IE 7 and 8 will convert all light and medium weights to normal, and all black and heavy weights to bold — so, you’ll lose some of your carefully set text.

So 👍 for this now