topic Re: Change font for entire app in WAB in Web AppBuilder Custom Widgets Questions

Change font for entire app in WAB

MarquesMunson1 — Mon, 06 May 2019 14:40:11 GMT

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?

Re: Change font for entire app in WAB

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:15:13 GMT

Marques,

The apps font in set in the jimu.css file:

/* Latin Extended */
@font-face {
  font-family: "Avenir Light";
  src: url("./fonts/avenir-next/bb590848-4012-46d6-a8d5-48c9893a176b.woff2") format("woff2"),
       url("./fonts/avenir-next/3a42a252-67ff-4186-88cf-762f56719ca1.woff") format("woff");
}

@font-face {
  font-family: "Avenir Medium";
  src: url("./fonts/avenir-next/7195d5d0-582f-42d4-86ca-9da8dc31146e.woff2") format("woff2"),
       url("./fonts/avenir-next/0417e965-6ae1-4395-8f71-f61ea767d523.woff") format("woff");
}

@font-face {
  font-family: "Avenir Heavy";
  src: url("./fonts/avenir-next/b86524f7-009e-4c08-a266-c43f1fb68e5e.woff2") format("woff2"),
       url("./fonts/avenir-next/e40e6ac5-f2bd-4d65-baf7-b1e397d7fdcc.woff") format("woff");
}

/* Cyrillic */
@font-face {
  font-family: "Avenir Light";
  src: url("./fonts/avenir-next/e8b9c8fa-dbfb-4576-9394-ae85e87cb003.woff2") format("woff2"),
       url("./fonts/avenir-next/fb555151-cbda-4728-b28d-6e5f085c2d55.woff") format("woff");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Avenir Medium";
  src: url("./fonts/avenir-next/1704d161-44ab-4854-a066-fe47d583a3a6.woff2") format("woff2"),
       url("./fonts/avenir-next/95aa7ca1-de33-40d9-ae40-ff045fcada66.woff") format("woff");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Avenir Heavy";
  src: url("./fonts/avenir-next/c4ec49e5-4817-4f05-9bee-cec6f46f9d61.woff2") format("woff2"),
       url("./fonts/avenir-next/8e0e32b3-034a-41e8-bd15-c22974ebcdb5.woff") format("woff");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'CalciteWebCoreIcons';
  src: url('./fonts/CalciteWebCoreIcons.eot?-v8piff');
  src: url('./fonts/CalciteWebCoreIcons.eot?#iefix-v8piff') format('embedded-opentype'), url('./fonts/CalciteWebCoreIcons.ttf?-v8piff') format('truetype'), url('./fonts/CalciteWebCoreIcons.woff?-v8piff') format('woff'), url('./fonts/CalciteWebCoreIcons.svg?-v8piff#CalciteWebCoreIcons') format('svg');
  font-weight: normal;
  font-style: normal;
}


body,html{
  font-family: 'Avenir Light', Verdana, Geneva, sans-serif;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change font for entire app in WAB

MarquesMunson1 — Mon, 06 May 2019 16:58:35 GMT

Thank you Robert, so is it just a matter of downloading the font that I want to replace it with and change the source? I am looking to change the font to Oswald.

Re: Change font for entire app in WAB

RobertScheitlin__GISP — Mon, 06 May 2019 17:04:41 GMT

Correct

Re: Change font for entire app in WAB

MarquesMunson1 — Tue, 07 May 2019 12:39:45 GMT

Thank you so much! It worked!

Re: Change font for entire app in WAB

RobertScheitlin__GISP — Tue, 07 May 2019 13:21:11 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: Change font for entire app in WAB

AmandaRompala — Wed, 11 Mar 2020 16:11:29 GMT

I downloaded a font and am trying to change the font in my app, but it isn't working.

This is what the font download looks like:

And this is the code I am using in the jimu.css file:

Any idea why it isn't changing my font? Thank you

Re: Change font for entire app in WAB

RobertScheitlin__GISP — Wed, 11 Mar 2020 16:18:45 GMT

Amanda,

Next you will have the replace the css rules that are pointing to the Avenir font-family.

Re: Change font for entire app in WAB

AmandaRompala — Wed, 11 Mar 2020 16:20:46 GMT

Anywhere else besides jimu.css? I changed everything pointing to avenir inside of jimu.css

Re: Change font for entire app in WAB

RobertScheitlin__GISP — Wed, 11 Mar 2020 16:25:47 GMT

Amanda,

Search the whole app for font-family.

Re: Change font for entire app in WAB

AmandaRompala — Wed, 11 Mar 2020 17:19:50 GMT

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.

Re: Change font for entire app in WAB

RobertScheitlin__GISP — Wed, 11 Mar 2020 18:43:11 GMT

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?

Re: Change font for entire app in WAB

AmandaRompala — Wed, 11 Mar 2020 19:57:22 GMT

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.

Re: Change font for entire app in WAB

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:15:16 GMT

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

Re: Change font for entire app in WAB

AmandaRompala — Wed, 11 Mar 2020 20:50:48 GMT

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?

Re: Change font for entire app in WAB

RobertScheitlin__GISP — Wed, 11 Mar 2020 21:13:22 GMT

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

Re: Change font for entire app in WAB

AmandaRompala — Wed, 11 Mar 2020 21:15:56 GMT

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

Re: Change font for entire app in WAB

CarbonCounty_Utah — Wed, 17 Nov 2021 23:33:54 GMT

Robert,

Do you know if it has to be a woff file type or can I use a .tff?