Change font for entire app in WAB

[MarquesMunson1]

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?

[RobertScheitlin__GISP]

Amanda,

   Search the whole app for font-family.

[AmandaRompala]

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. 

[RobertScheitlin__GISP]

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?

[AmandaRompala]

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.

[RobertScheitlin__GISP]

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;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AmandaRompala]

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?

[RobertScheitlin__GISP]

I just did a search in the app for font-family, because there is Avenir Light, Medium and Heavy

[AmandaRompala]

I think replacing all the lights/mediums/heavys correctly is where I messed up. Well thanks for the help!