Create custom fonts online and custom Fonts

Create custom fonts online and custom Fonts

 

This article describes how to use an existing free tool to create custom fonts.

 

We will use the following free online tools.

 

1) IconMoon (Https://icomoon.io/app/#/select/font)

IconMoon is an excellent tool for creating custom web page icon fonts for free. Provides an online font production APP, an offline Chrome plug-in, and free open-source icons for your choice. Supports uploading icons or single characters in SVG format.

2) EverythingFonts (Https://everythingfonts.com/ttf-to-svg)

EverythingFonts provides a variety of font conversion tools to convert ttf, otf, wotf, and other fonts to SVG format.

Fontfacegen (http://fontfacegen.com/ttf-to-svg-converter) also provides similar conversion features.

With the above two tools, we can "move" our favorite open-source characters to our custom fonts.

 

Step 1: Use the font conversion tool to convert TTF to SVG format.

There are some open source fonts that have provided SVG format (for example: fontawesome-webfont.svg) can be directly uploaded in the following steps, there is no need for font conversion this step. This tool is suitable when we cannot find fonts in SVG format.

 

EverythingFonts's font converter is relatively simple to use,

A) Open The webpage and check "the EULAs of The font allow this conversion :"

B) Click the blue "Pickup Font File" button to upload the TTF Font File locally.

C) Click the green "Convert" button to download the converted SVG file.

The converted SVG file contains character encoding. After the file is imported, the of other fonts will be the of our custom fonts.

 

Step 2: start making our own Fonts

[1] Open Iconmoon App (https://icomoon.io/app/#/select/font) directly in the browser)

The free iconmoon icon is displayed in front of you. You can select it directly or click "Add Icons From Library…" at the end ..." Link to the icon library to select.

[2] Create an empty icon set to facilitate classification.

[4] use the "import to set" menu item next to the icon set to import the. svg file we created (or open source) before.
You can also upload a single SVG character.

[5] edit characters

If it is imported from another font, sometimes it is found that the actual layout may have different character widths,
In this way, we need to modify it through the iconmoon editing function. For each imported character, it is best to check it here.

A) Press the edit button on the toolbar. Click the character to be modified.

B) on the pop-up editing page, We can edit and check the characters.

 

We recommend that you select "Gride" in the upper-right corner and click the number next to it to select a 16x16 grid.

In this way, the editor will display a grid, which makes it easy for us to adjust the font position and width.

 

The character editing button is located in the lower left corner of the character.

Rotate and flip characters

Location Adjustment

Zoom

Width and alignment

 

The most common features are the position adjustment and Width Adjustment functions, because the imported font usually has two problems,

 

First, if the baseline height is different from that of other characters, the custom characters are too high or too low.

Here we use the location adjustment tool to fix this problem with grid.

 

Second, the character width is different, resulting in individual characters being too wide, and the text layout Seems messy and affects reading.

Here we can use the Width Adjustment button to increase or decrease the character width to fix this problem.

 

If you need more complex and accurate modifications, we recommend that you use the "Download (SVG)" button at the bottom to Download the SVG file of the corresponding character, and then use vector graphics software (such as AI) after the modification is complete, use the "Replace" button to separately upload the modified SVG character for replacement.

 

[6] generating custom Fonts

Click the select button at the top of the page to switch the selection status. Then select the characters you want to export.

You can also use "Select All/Deselect" on the right side of each custom character set to quickly Select an image.

Click the "Generate Font" button at the bottom of the page to Generate a Custom Font.

 

On this page, you can see the character encoding of each font.

Place the mouse over character encoding, and the "<> Get Code" link appears. You can see how we can use this character on the HTML page.

There are three usage methods:

• Directly use the introduced class (the downloaded CSS file needs to be referenced on the page)
  <Span class = "icon-exclam"> </span>
• Use in CSS
  . Icon-exclam: before {
  Content: "\ 21 ";
  }
• Use HTML Entity encoding directly
  & # X21;

[7] download the font.

Click the "download" button in the lower-right corner to download the Custom font.

The downloaded ZIP package contains the following files.

• The fonts folder contains the generated font files, which must be used to use custom fonts on webpages.
• Style.css is an example CSS that contains CSS code that defines the font. You can copy it to your own CSS file and use it directly.
• The demo.html page is the encoding and example of each character. Check this file so that you can use these custom characters on the HTML page.
• The select. json file is important. It contains all information about the Custom font.

[8] modify again

The select. json file contains all the characters in the character set.

When we find that some characters need to be modified, we can directly import the JSON file (import to set) in the IconMoon APP ). Then, modify individual characters.

 

Edit the select. json file. We can also modify the character encoding. For example, we want to place the navigation icon in the E600 range and the statistics icon in the E900 range. Separate icons of different categories. You can edit this file.

In the select. json file, each character is a JSON object. Has the same structure.
The path value of SVG in time for the icon \ paths attribute.
The properties \ code attribute is the Unicode character encoding in decimal format.
We only need to convert the corresponding hexadecimal Unicode encoding (E900, E800, and so on) into decimal.
Then import the image to generate the image and download it to use the new Unicode encoding.

 

The above is my experience in practical application and I hope it will help you.