Previously read the post from Wei/Tomer about how to change the Font in UX App:
Recently working on the CSS style, and trying to manage the Font Better for any UX application.
1) Step 1: search / get the font specifically for Web application.
I am using Google webfont helper, it helps automate the css code
https://google-webfonts-helper.herokuapp.com/fonts/barlow?subsets=latin
Step 2: copy download web font files (incl. css file) to UX webapp folder
create a font folder under apq-c3-custom
Step 3: prepare the css or scss file for UX applicaiton
I am using scss, which need to be "gulp"ed.
I am also keep the font css file separate, so more flexible to choose
font path need to be updated on the top of the auto-generated css from Google webfont helper
Step 4: adding the following code to “_custom-style.scss”
@import “./cwa-font-barlow-condensed-v5-latin.scss”;
@import “./cwa-font-barlow-semi-condensed-v6-latin.scss”;
@import “./cwa-font-barlow-v5-latin.scss”;
@import “./cwa-font-noto-sans-sc-v11-latin_chinese-simplified.scss”;
@import “./cwa-font-noto-sans-tc-v10-latin_chinese-traditional.scss”;
@import “./cwa-font-poppins-v13-latin.scss”;
@import “./cwa-font-raleway-v18-latin.scss”;
@import “./cwa-font-roboto-v20-latin.scss”;
body{
// font-family: “Barlow Condensed” !important;
// font-family: “Barlow Semi Condensed” !important;
// font-family: “Barlow” !important;
// font-family: “Noto Sans SC” !important;
// font-family: “Noto Sans TC” !important;
// font-family: “Poppins” !important;
// font-family: “Raleway” !important;
// font-family: “Roboto” !important;
font-family: "Barlow" !important;
// font-weight: regular; // 400 weight as default
// font-weight: 500; // 500 weight a bit clear for lighter font
font-weight: 500;
// font-size: small; // default size
font-size: 13px; // works better for me
}
One of the benefit of having specific font is that you can choose those fonts which had more Style/Weight, which giving you more flexibility in creating different “layer” of the content (title, table etc.), which might be very important to build a Better Dashboard.
