Setting up the font for your dashboards

Customizing your dashboard's theme, including fonts, is essential in integrating your Luzmo dashboard into your platform. This guide will walk you through how to do just that.

Use our built-in fonts

There are many fonts available in the theming of Luzmo dashboards. Check within your dashboard's Settings => Theme => Fonts dropdown if the font you are looking for is already available within the Luzmo dashboard.

Add your own font

If you're not able to configure your desired styling within your dashboard or widget's settings > themes, then you can add your own font! There are three possibilities that you can choose from (in order of difficulty):

1. If it is a free google font, it can be added by our team to the list found within themes! Feel free to submit the google font via the "Submit an idea" button of our roadmap (please also contact your Customer Success Manager if this is an urgent request).
2. It can be added via CSS overrides directly in the dashboard (Dashboard settings > advanced > inject CSS styles). More info in this Academy article.
3. Last but not least, it's also possible to add this CSS override to the Embedded token so it is easily applied to all dashboards loaded with it. This Academy article provides more information on how to achieve this!

Note that CSS requires publicly hosted font file(s) in order to specify its source URL(s). Example CSS code: 

@font-face {
 font-family: 'Grey Qo';
 font-style: normal;
 font-weight: 400;
 src: url(https://fonts.gstatic.com/s/greyqo/v1/BXRrvF_Nmv_TyXxNPONa9Ff0.woff2) format('woff2');
 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
 font-family: 'Grey Qo';
 font-style: normal;
 font-weight: 400;
 src: url(https://fonts.gstatic.com/s/greyqo/v1/BXRrvF_Nmv_TyXxNPOJa9Ff0.woff2) format('woff2');
 unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
 font-family: 'Grey Qo';
 font-style: normal;
 font-weight: 400;
 src: url(https://fonts.gstatic.com/s/greyqo/v1/BXRrvF_Nmv_TyXxNPOxa9A.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.widget-wrapper {
 font-family: 'Grey Qo' !important;
}

Disclaimer: Injecting custom CSS into your dashboard could influence up its rendering in a negative manner. Please take into account that new platform updates may break your custom CSS at any time. It will be your responsibility to maintain this CSS code.