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) undesirable 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.

Making custom fonts for GLCD library

Update: I’ve been working on a little Qt based tool called glcd-utils which does makes creating fonts and bitmaps on GLCDs a lot easier than the process below. It is open source, but no binaries available or even much documentation. You can visit the Github page here. Otherwise, back to the tutorial below.

Here’s a quick guide on how to make your own custom fonts for my GLCD library, using the free MikroElectronika GLCD Font Creator. You can download this tool here and install it to your computer. You can download this software here:

http://www.mikroe.com/eng/products/view/683/glcd-font-creator/

This free tool was designed for use with MikroElektronika’s line of compilers, but it also works well with my library.

Install the software and start it up

Go to File -> New Font -> Important an Existing System Font

Select a font you would like to convert.

Choose the range of characters you would like converted. e.g just numbers, or alpha numeric numbers, etc.  32 to 127 covers most characters everyone needs to use. Refer to an ASCII table if you need to find out what number refers to which character.

Now click OK and the font should start to get imported in the program. A screen like below should show. You can click on each character see what the character is and how the pixelation will be set. You can also edit the fonts as well if needed to.

Go to File -> Export for GLCD

You should now see a screen like below. Change your font name to something descriptive. I like to put the start and end characters in it, and also the font size which may already pre filled for you. The font size is the dimensions in pixels of the generated font. In this example it is 31 by 27.

Choose X-GLCD Lib (only option for fonts with height over 8 bits) and KS0108 format.

Click on MikroC tab, and then make two edits to the source.

Change the type to “const char”, and add PROGMEM to just before the ‘=’ character.

This code is now ready. So we need to make a new font file, in our application. Here we’ll make a new file in CooCox editor, but you can use whatever method you like to create a new file.

I like to call the filename the same as the font description we made earlier. It will make it easier later when you’re using it. Copy and paste the code you previously generated into this new file.

We now need to add some #ifdef statements to the start and end of the header file. Like above. Make the symbol name nice and descriptive as well. Here we add to the start of the file:

#ifndef TAHOMA_32_TO_127_32X27_H_
#define TAHOMA_32_TO_127_32X27_H_

And then also add to the end of the file:

#endif

Now we’re done, to use the font, include the header file in your source code

#include "Tahoma_32_to_127_31x27.h"

Set your font like this (this is why it I mentioned to call the filename and font array the same name):

glcd_set_font(Tahoma_32_to_127_31x2,31,27,32,127);

Note we need to set the width, height, start char and end char as parameters to the glcd_set_font() function.

Now we’re ready to use it!