I am looking to change the font for everything in my app and I am using WAB developer edition. Is there a CSS file that I can make the change? After making the change, do I simply refresh the page and the change will show?
Solved! Go to Solution.
Amanda,
Search the whole app for font-family.
I searched the whole app and replaced all Avenir with Arimo; the only font that is changing is the subtitle. Everything else is exactly the same.
Amanda,
I just downloaded the arimo font from Google and tested and it worked fine. So the first question I have is where did you place the woff and woff2 files Exactly? I mean what exact directory did you place them in?
Robert,
I placed the woff files here: app\jimu.js\css\fonts\arimo\ woff files
I think since the Avenir had a light, medium, and heavy, and the arimo only has the regular and 700, when I was replacing it, there might have been some areas I did incorrectly.
I've decided to use Helvetica instead of Arimo, and I got it to work.
Amanda,
Hmm... This is my css rules and I did No place the files in a sub folder under fonts.
/* arimo-regular - latin */
@font-face {
font-family: 'Arimo';
font-style: normal;
font-weight: 400;
src: url('./fonts/arimo-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Arimo Regular'), local('Arimo-Regular'),
url('./fonts/arimo-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/arimo-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/arimo-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('./fonts/arimo-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/arimo-v13-latin-regular.svg#Arimo') format('svg'); /* Legacy iOS */
}
/* arimo-700 - latin */
@font-face {
font-family: 'Arimo Bold';
font-style: normal;
font-weight: 700;
src: url('./fonts/arimo-v13-latin-700.eot'); /* IE9 Compat Modes */
src: local('Arimo Bold'), local('Arimo-Bold'),
url('./fonts/arimo-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/arimo-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/arimo-v13-latin-700.woff') format('woff'), /* Modern Browsers */
url('./fonts/arimo-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/arimo-v13-latin-700.svg#Arimo') format('svg'); /* Legacy iOS */
}
body,html{
font-family: 'Arimo Bold', Verdana, Geneva, sans-serif;
}
Do you have any advice on the best way to replace the rest of the app's Avenir with Arimo? Do you just use Replace?
I just did a search in the app for font-family, because there is Avenir Light, Medium and Heavy
I think replacing all the lights/mediums/heavys correctly is where I messed up. Well thanks for the help!