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

Loading icon fonts locally when using Ant Design framework

Don’t use Alibaba’s CDN!

By default, when using Ant Design ReactJS UI framework, icon font are loaded from China’s Ali CDN (run by Alibaba). This may be (and usually is) undesirably behaviour. You may prefer to have a web site that does not call home when you load a page, or leak IP addresses to a third party, this is a security concern.

There are several security issues which have been raised to ant-design, but solutions are not simple to implement.

After some time wasted 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. You can get the fonts here:

This should serve fonts locally both in development and also in the built files.

Leave a Reply

Your email address will not be published. Required fields are marked *