Loading icon fonts locally when using Ant Design React framework (instead of AliCDN)

05 August, 20181 min readWeb Development

Don’t use Alibaba’s CDN!

By default, when using the Ant Design ReactJS UI framework, icon fonts are loaded from China’s Alibaba Cloud CDN. This may be undesirable behaviour. You might prefer to have a web site that does not call home when you load a page, or leak IP addresses to a third party. You probably just want all your assets hosted on your own services.

After some time spent trying to solve this, this is my quickest and easiest solution.

Normally, you may have the following in your CSS file to import antd’s styles

@import '~antd/dist/antd.css';

We just need to add a few lines below this, to overwrite the font locations, so we get this

@import '~antd/dist/antd.css';
@font-face {
  font-family: 'anticon';
  src: url('./iconfont/iconfont.eot'); /* IE9*/
  src: url('./iconfont/iconfont.woff') format('woff'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('./iconfont/iconfont.ttf') format('truetype'), /* iOS 4.1- */
  url('./iconfont/iconfont.svg#iconfont') format('svg');
}

You’ll need to download the icon fonts to the ./iconfont/ dir locally.

This should now serve fonts locally instead of from Alibaba CDN both in development and also in the built production files.

© Andy Gock 2009−2019