Change the font all across the application

Apliqo UX
1

If you like to change the font used in the entire application ,
you would need to make changes in 2 files accordingly :

the example below will change the font the ‘Amazon Ember’

In “apq-c3-custom/js/default.constant.js” HIGHCHARTS_OPTIONS needs to be set to:

‘HIGHCHARTS_OPTIONS’: { // lang | Highcharts JS API Reference
‘global’: {},
‘chart’: {
‘style’: {
‘fontFamily’: ‘“Amazon Ember”, Arial, sans-serif’
}
}
},

And at the bottom of “apq-c3-custom/css/scss/_custom-style.scss” you need to add the following lines:
@font-face {
font-family: ‘Amazon Ember’;
src: url(https://m.media-amazon.com/images/G/01/AUIClients/AmazonUIFont-amazonember_rg-cc7ebaa05a2cd3b02c0929ac0475a44ab30b7efa._V2_.woff2) format(“woff2”), url(https://m.media-amazon.com/images/G/01/AUIClients/AmazonUIFont-amazonember_rg-8a9db402d8966ae93717c348b9ab0bd08703a7a7._V2_.woff) format(“woff”)
}

@font-face {
font-family: ‘Amazon Ember’;
font-style: italic;
src: url(https://m.media-amazon.com/images/G/01/AUIClients/AmazonUIFont-amazonember_rgit-9cc1bb64eb270135f1adf3a4881c2ee5e7c37be5._V2_.woff2) format(“woff2”), url(https://m.media-amazon.com/images/G/01/AUIClients/AmazonUIFont-amazonember_rgit-a4dc98d644ff2aedd41da3da462f09ffce86eafb._V2_.woff) format(“woff”)
}

@font-face {
font-family: ‘Amazon Ember’;
font-weight: 700;
src: url(https://m.media-amazon.com/images/G/01/AUIClients/AmazonUIFont-amazonember_bd-46b91bda68161c14e554a779643ef4957431987b._V2_.woff2) format(“woff2”), url(https://m.media-amazon.com/images/G/01/AUIClients/AmazonUIFont-amazonember_bd-b605252f87b8b3df5ae206596dac0938fc5888bc._V2_.woff) format(“woff”)
}

@font-face {
font-family: ‘Amazon Ember’;
font-style: italic;
font-weight: 700;
src: url(https://m.media-amazon.com/images/G/01/AUIClients/AmazonUIFont-amazonember_bdit-80ff7aba37dd1ff5a6b90233a19e3a780a96dc2f._V2_.woff2) format(“woff2”), url(https://m.media-amazon.com/images/G/01/AUIClients/AmazonUIFont-amazonember_bdit-57598ce426a612be5a1d15eee08252668fca5e7a._V2_.woff) format(“woff”)
}

body {
font-family: “Amazon Ember”, Arial, sans-serif !important;
}

#apq-c3-name {
font-family: inherit;
}

2 Likes
2

Thanks for the info Tomer! Just an additional tip in case anyone is trying to host the fonts locally.

1 Like