Select to view content in your preferred language

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

3852
13
01-16-2019 03:11 PM
ChadKahler
Emerging Contributor

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!
Tags (2)
13 Replies
Noah-Sager
Esri Regular Contributor

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

ChadKahler
Emerging Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Chad,

   Here is a free online util for that:

Convert TTF to PFB (Online & Free) — Convertio 

0 Kudos
ChadKahler
Emerging Contributor

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

0 Kudos
MarekCikos
New Contributor

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.

0 Kudos
DavidWilton
Frequent Contributor

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\

 

0 Kudos
ArchanaVenkataraman
Occasional Contributor

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?

0 Kudos
ChadKahler
Emerging Contributor

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.

ChadKahler
Emerging Contributor

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>

0 Kudos