search

YodaSpow / EmailDevTools

EmailTools
https://codepen.io/spowart/details/abWzBwR
7 stars 1 forks source link

Update Fall-back font improvement. #39

Closed YodaSpow closed 4 years ago

YodaSpow commented 5 years ago

Is your feature request related to a problem? Please describe. Fall back for Arial vs Arial black based on a different in-line font calls in the email.

Applies for the ON/OFF switch for "Fonts" font-family:gothamBlack, Arial black, Helvetica, sans-serif;: Fallback: Arial black font-family:gothamBook, Arial, Helvetica, sans-serif;: Fallback: Arial

YodaSpow commented 5 years ago

Updated.

YodaSpow commented 5 years ago

Need to add font-family:gUltra, Arial Black, Helvetica, sans-serif; Fallback: Arial black

.fonts [style*="gothamBlack"], .fonts [style*="gBlack"], .fonts [style*="gothamUltra"], .fonts [style*="gUltra"] { 
  font-family: "Arial Black", sans-serif !important;
}
YodaSpow commented 5 years ago

Add iD fonts to fall back methods of OFF. Maybe more intelligent way of doing this?

@font-face { font-family: 'idmHEAD'; src: url('https://currys-ssl.cdn.dixons.com/css/themes/email/iD/assets/header/iDHeadline.woff') format('woff'), url('https://currys-ssl.cdn.dixons.com/css/themes/email/iD/assets/header/iDHeadline.ttf') format('truetype'); font-weight: normal; font-style: normal; mso-font-alt: 'Arial Black'; }
@font-face { font-family: 'idmSUB'; src: url('https://currys-ssl.cdn.dixons.com/css/themes/email/iD/assets/header/iDSubHeadline.woff') format('woff'), url('https://currys-ssl.cdn.dixons.com/css/themes/email/iD/assets/header/iDSubHeadline.ttf') format('truetype'); font-weight: normal; font-style: normal; mso-font-alt: 'Arial Black'; }
@font-face { font-family: 'idmREG'; src: url('https://currys-ssl.cdn.dixons.com/css/themes/email/iD/assets/header/iDRegular.woff') format('woff'), url('https://currys-ssl.cdn.dixons.com/css/themes/email/iD/assets/header/iDRegular.ttf') format('truetype'); font-weight: normal; font-style: normal; mso-font-alt: 'Arial'; }
YodaSpow commented 5 years ago

Updated CSS to integrate the font selections for iD Mobile font stack as ON | OFF:

/* gothamBlack | gBlack + Arial (B/b:lack) used in font-family */
.fonts [style*="gothamBlack"], .fonts [style*="gBlack"], .fonts [style*="gothamUltra"], .fonts [style*="gUltra"], .fonts [style*="idmHEAD"] { 
  font-family: "Arial Black", sans-serif !important;
}
/* FALLBACK: - if Arial (B/b:lack) is NOT used in font-family  */
.fonts [style*="gothamBook"], .fonts [style*="gBook"] { 
  font-family: Arial, sans-serif !important;
}
/* gothamBook | gBook | idmHEAD + Arial (B/b:lack) used in font-family */
.fonts [style*="gothamBook"][style*="lack"], .fonts [style*="gBook"][style*="lack"], .fonts [style*="idmHEAD"][style*="lack"] { 
  font-family: "Arial Black", sans-serif !important;
}
/* idmREG | idmSUB + Arial (only) used in font-family */
.fonts [style*="idm"][style*="Arial,"] { 
  font-family: "Arial", sans-serif !important;
}

gothamBook: font-family:gothamBook, Arial Black, Helvetica, sans-serif; gothamBlack: font-family:gothamBlack, Arial Black, Helvetica, sans-serif; gothamUltra: font-family:gothamUltra, Arial Black, Helvetica, sans-serif;

gBook: font-family:gBook, Arial Black, Helvetica, sans-serif; gBlack: font-family:gBlack, Arial Black, Helvetica, sans-serif; gUltra: font-family:gUltra, Arial Black, Helvetica, sans-serif;

idmHEAD: font-family:idmHEAD, Arial Black, Helvetica, sans-serif; idmREG: font-family:idmREG, Arial, Helvetica, sans-serif;