topic Re: API v4.10 adding a local font (ESRI Weather) in ArcGIS JavaScript Maps SDK Questions

API v4.10 adding a local font (ESRI Weather)

ChadKahler — Wed, 16 Jan 2019 23:11:39 GMT

Prior to the newest release of the ESRI JavaScript API 4.10, I have been able to include the ESRI Weather font to my page through CSS via the following code:

@font-face {

font-family: "ESRI Weather";

src: url("ESRIWeather.eot");

src: url("ESRIWeather.eot?#iefix") format("embedded-opentype"),

url("ESRIWeather.woff") format("woff"),

url("ESRIWeather.ttf") format("truetype"),

url("ESRIWeather.svg#svgESRIWeather") format("svg");

font-weight: normal;

font-style: normal;

}

That does not appear to work anymore with 4.10 and the documentation is a little confusing about how to add a local font. Has anyone been able to successfully include a local font with a page that utilizes version 4.10 of the API....or do you know the path of how I could include the ESRI Weather Font from ESRI?

Thanks for any insights that someone may have!

Re: API v4.10 adding a local font (ESRI Weather)

Noah-Sager — Thu, 17 Jan 2019 20:09:31 GMT

Hi Chad Kahler, at 4.10 we improved performance by drawing all layers in a 2D MapView in WebGL, this requires all fonts to be hosted in pbf file format.

Release notes for 4.10 | ArcGIS API for JavaScript 4.10

If you want to host your own fonts, they need to be converted into pbf and hosted (by setting the esriConfig.fontsURL property to point to your own server).

Labeling | ArcGIS API for JavaScript 4.10

Hope this helps.

-Noah

Re: API v4.10 adding a local font (ESRI Weather)

ChadKahler — Thu, 17 Jan 2019 20:56:52 GMT

Thanks for the response! I guess my primary obstacle is trying to figure how to convert a local font file to pbf format.

Also, after trying the esriConfig.fontsURL property, it appears that it is all or nothing? You cannot host one font locally and then load the rest from the ESRI API...is that correct?

Thanks for your assistance!

Chad

Re: API v4.10 adding a local font (ESRI Weather)

RobertScheitlin__GISP — Thu, 17 Jan 2019 21:23:01 GMT

Chad,

Here is a free online util for that:

Convert TTF to PFB (Online & Free) — Convertio

Re: API v4.10 adding a local font (ESRI Weather)

ChadKahler — Thu, 17 Jan 2019 21:33:32 GMT

Hi Robert,

Thanks for the assistance, but I thought the fonts had to be converted to PBF format...not PFB? Are they the same thing? I have to admit...I am not very familiar with font formats.

Thanks,

Chad

Re: API v4.10 adding a local font (ESRI Weather)

ArchanaVenkataraman — Thu, 25 Apr 2019 13:15:49 GMT

Chad Kahler‌ were you able to give reference to a local font family?

I am trying to have a completely offline application. Just need the default fonts but on local.

Noah Sager‌ is there any way to maintain the some of the default font family provided by ESRI on my local and then provide the esriConfig.fontsURL?

Re: API v4.10 adding a local font (ESRI Weather)

ChadKahler — Thu, 25 Apr 2019 13:51:13 GMT

I was able to get it to work by hosting the ESRI Weather font (in its various font formats) locally and then include via CSS. The main reason I have been looking to have it included within the ESRI JavaScript API is because our work computers prevent browsers from loading local font files.

Re: API v4.10 adding a local font (ESRI Weather)

ChadKahler — Fri, 26 Apr 2019 15:42:05 GMT

I think the inclusion of the ESRI Weather font within the API is under

consideration for future releases.

On Fri, Apr 26, 2019 at 8:01 AM Archana Venkataraman <geonet@esri.com>

Re: API v4.10 adding a local font (ESRI Weather)

Noah-Sager — Mon, 29 Apr 2019 18:41:59 GMT

Archana, we do not have an official solution for this workflow at this time, but it is under consideration. Same for what Chad said about including the Esri Weather font. Will keep this thread updated when we have some news to share.

Re: API v4.10 adding a local font (ESRI Weather)

MarekCikos — Wed, 19 May 2021 09:58:20 GMT

You need to convert desired font to .pbf format, not .pfb. We faced the same problem (wanted custom font in esri map, currently using 4.19 JS API) and we managed to convert our font to .pbf format using Mapbox.

https://docs.mapbox.com/api/maps/fonts/

Hope this helps to resolve the problem.

Re: API v4.10 adding a local font (ESRI Weather)

DavidWilton — Mon, 16 Aug 2021 22:03:36 GMT

For anyone else looking to use a custom font I really struggled with this so documenting here. There doesn't appear to be a documented way on how to create a PBF font for Esri.

A tip I got was the easiest way is to create a vector tile package with the font in in. Then rename the VTPK to .zip unzip and the font will be under resources\fonts\

Re: API v4.10 adding a local font (ESRI Weather)

andrei_ste — Thu, 22 Jun 2023 05:14:11 GMT

I am also trying to label a feature layer in my application developed with React and JavaScript SDK for ArcGIS, with a custom font which I have in woff and woff2 format. @Noah-Sager what tool can I use to convert the font from woff or woff2 to the desired pbf format?

Re: API v4.10 adding a local font (ESRI Weather)

Noah-Sager — Mon, 26 Jun 2023 14:15:06 GMT

Hi @andrei_ste. As of 4.27, woff2 will work in 3D SceneViews:

https://developers.arcgis.com/javascript/latest/labeling/#fonts

For 2D MapViews, here are the steps that will export fonts to pbf format using ArcGIS Pro:

1) Install the font

2) Author a small map in Pro and use the font for labels

3) Create a VTPK

4) Unzip it and pull the font out

Re: API v4.10 adding a local font (ESRI Weather)

andrei_ste — Mon, 26 Jun 2023 16:29:51 GMT

Managed to convert the font but I still can't see any changes in the webmap. I copied all the files from the VPTK in a folder named inter-bold. From the browser developer tools, it seems that the font is fetched correctly but no changes are applied. Do you have any idea why this is happening? The font that I want to apply is Inter which is open source. Thank you for the response!

Re: API v4.10 adding a local font (ESRI Weather)

Joshua-Young — Mon, 06 Jan 2025 22:51:06 GMT

Thank you, this is really helpful!