Tag: WOFF

   Continued from “To create a WOFF file from my own handwriting-#2.”.

   Now, I have the ttf file(Untitled1.ttf) I want. First I’ll make a subset from the ttf file. Actually my ttf file only contains 31 glyph, nevertheless, the subset file is smaller than the original file. So, this work is worthwhile. Second, I’ll make a WOFF file.

   You can find some sites which create WOFFs from ttfs. For example, Webfont Generator, ttf to woff converter, Font2Web, and so on. Some of them can convert full-size characters as well as half-size characters, others cannot. You are able to use command line tools like sfnt2woff. But I found a tool named WOFFコンバータ and can use it on Windows 2000／XP／Vista／7／8 and Mac OS X 10.6 or later. Besides, they distribute a subset font maker named サブセットフォントメーカー, which also works on Windows 2000／XP／Vista／7／8 and Mac OS X 10.6 or later. So, I’ll use it. I greatly appreciate their tools.

1. Install サブセットフォントメーカー and WOFFコンバータ.
2. Run サブセットフォントメーカー.   — Fig.1
    
   Explanations of words:
   参照　<---　Browse. 作成元フォントファイル　<---　It means "Original File Location & Name". 作成後フォントファイル　<---　It means "Subset File Location & Name". フォントに格納する文字　<---　It means "What characters you want the Subset file to include". 書体名を変更する　<---　Change Font Name. IMPORTANT!! If a font on your system has the same name, it might be affected by this font.
   作成開始　<---　Make Subset
3. After 2, WOFFコンバータ runs automatically.   — Fig.2
    
   Explanations of words:
   サンプル文字列　<---　Characters for @font-face Demo 変換開始　<---　Convert to WOFF.

   When this work ends, the tools give me next three files.
　　　　　・Untitled1_sub.html
　　　　　・Untitled1_sub.ttf
　　　　　・Untitled1_sub.woff

   If you open the Untitled1_sub.html by a text editor, you can find the css code you need.

   In my case, I created the WOFF to use for the my Japanese blog Theme which is a child Theme of ‘Sugar and Spice’. So I added the css customization for its style.css. Here is my current style.css in the child Theme folder. Bold and italic parts are new additions. Of course, you have to upload the WOFF file to your server.
   Then the Widget Titles on my Japanese blog have changed their design. See the top image of this post. The WOFF file size is only 10.8KB. Now I have satisfied my own ego trip ha-ha-ha.

   Mission complete!! Clap, clap.

/*
Theme Name: J blog
Theme URI: http://webtuts.pl/themes/sugar-spice
Description: sugarspice Child Theme
Author: Aleksandra Laczek
Author URI: http://webtuts.pl
Template: sugar-and-spice
Tags: light, white, gray, two-columns, fixed-layout, responsive-layout,
custom-background, custom-menu, featured-images, theme-options, threaded-comments,
translation-ready, full-width-template
Text Domain: sugarspice-child
*/

@import url("../sugar-and-spice/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */
@font-face {
font-family: 'MyFont';
src: url('Exact URL to Untitled1_sub.woff') format('woff');
}

body {
color: #000;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
color: #000;
}

/* Calendar Widget */
table th,
table td{
color: #000;
background: transparent;
border: none;
text-align: left;
}

.widget-title em {
font-family: 'MyFont';
font-size: 26px;
font-style: normal;
padding-left: 3px;
}

/* 07. Forms & buttons
================================================== */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
color: #000;
}

/* #Forms */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
textarea,
select {
color: #000;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
color: #000;
}

label span,
legend span {
color: #000;
}

Edit(Jul.17):
   Hey guys, I have good news for you. Now, we can use FontForge for Windows with no pains. At this time, its version is 20-06-2014.

   Continued from “To create a WOFF file from my own handwriting-#1.”.

   Now, I can use FontForge. By the way, the fontforge_cygwin-20090914.tar.bz2 on my Windows8 Pro x86 is very unstable. But it works. FontForgeSetup_2012-07-31_Windows.exe didn’t work and fontforge-20090923-1.i386.rpm was more unstable than fontforge_cygwin-20090914.tar.bz2 on my system. There is no turning back. So, I use the fontforge_cygwin. See the edit. You can use FontForge for Windows.
   I first write about creating a ttf file, but note the following points. To follow my procedure probably you have a ttf file and it possibly works. But I do not mention a lot of information to create a full ttf file. So if you want to make a decent ttf file, learn about it by yourself after my method confirmed. You can find more information on Tutorial.
 
**Step by step #2**

1. Open a cygwin window (by clicking on the cygwin icon).
   $ xinit   — Fig.1

   I have X in a large window.
   [Note] I think you’d better make a working folder for your WOFF. The folder is named MyFont or something like that and placed in cygwinhome<username>. You save your Inkscape SVG files to the folder, which is convenient for your rest work.

2. $ cd MyFont
   $ fontforge -new   — Fig.2
   I have a new window at the right top corner.
3. ***Starting to create a font.
   1. I create a Japanese font, so I use a re-encoding feature (JIS 212 (Kanji)).   — Fig.3
   2. ****Creating a half-width character.

      At the first, I make “p” as a half-width character example. Double clicking on the green area.   — Fig.4
      I have another window.   — Fig.5

   3. Use ‘Import’.   — Fig.6
   4. Click ‘Image’ and choose ‘SVG’ from the drop down menu.   — Fig.7, Fig.8
   5. Double click p.SVG.   — Fig.9
   6. Choose ‘Close’.   — Fig.10
   7. “p” is a half-width character, so Use ‘Metric Window’.   — Fig.11
   8. Change the width from ‘1000’ to ‘500’.   — Fig.12
   9. Close ‘Metric Window’.   — Fig.13
   10. Save all I made as a sfd file (default: Untitled1.sfd).   — Fig.14, Fig.15
       [Note] Usually, we don’t need saving at this point, but my FontForge is very unstable. So, I saved all at the point every time just to be on the safe side.
   11. [Note] If you make half-width characters, repeat 2(Fig.4) -10(Fig.15) about all half-width characters you want to make.
        
   12. ****Creating a full-width character.

       I make “ン” as a full-width character example. When making a full-width character, use ‘View’ → ‘Goto’ feature because the finding character place is difficult.   — Fig.16

   13. Copy & paste “ン” in the search form and [OK].   — Fig.17
   14. Double clicking on the yellow area.   — Fig.18
       Repeat from Fig.5 to Fig.8.
   15. Double click U+30F3.SVG.   — Fig.19, Fig.20
       [Note] ‘U+30F3’ is the Unicode for ‘ン’. If available, ン.SVG is convenient for its file name, but, unfortunately this directory menu does not show full-width characters correctly on my system. So I use half-with characters as SVG file names.
   16. Close the window.   — Fig.10
   17. Save all to the sfd file which I made when I created the character “p”.   — Fig.14
   18. [Note] If suspending your creation, do Fig.21, Fig.22, Fig.23.
   19. [Note] If resuming your creation, type “fontforge YourFont.sfd” instead of “fontforge -new”.
   20. Repeat the work above about the characters I want to create. After that I have a sfd file which contains all glyph I want.
   21. Generate and save a ttf file.   — Fig.24, Fig.25
       [Note] Unchecked ‘Validate Before Saving’.
4. Finaly, I have the ttf file I want.

   The next post I will write how to make a subset file.

   Hey guys, I have good news for you. Now, we can use FontForge for Windows with no pains. At this time, its version is 20-06-2014.

   One of the reasons I chose the Theme “Sugar and Spice” was its Widget title design. Originally, it also provides the same design for blog titles though I don’t use this feature for the title. The name of the font for the designs is Niconne. It is available on Google Fonts and we can use it by this instructions.

   After changing my Theme to “Sugar and Spice”, I suddenly found the Niconne includes only Latin font. On my Japanese blog the Widget titles are like the right image. Oops. Its Japanese font is dry and boring. Besides, what fonts are used depends on the visitors’ PC environment. Only “w” and “p” are displayed by the Niconne. I don’t like this.

   So I was looking for a Japanese WOFF instead of Niconne, but I couldn’t. At this point, when we use WOFFs of Japanese fonts, we have some specific difficulties. In Japanese texts we use various kind of characters than in Latin texts. A Japanese font file at least contains about 7000 characters. So the size of Japanese font files are much bigger and to create a Japanese font file needs harder work than to create a Latin one. Therefore, to find a free Japanese WOFF is difficult. To use a free Japanese WOFF is also inconvenient because the display of the blog slows down due to its size. Time that gives technology improvements will resolve this issues. But then, I was in trouble.

   Hence I decided to create a WOFF file from my own handwriting. Because I need only 31 characters for my Japanese blog Widget titles(最近の投稿広告コメントタグアーカイブテゴリ日本公式キャラクwp). So, I don’t need a full WOFF of Japanese. Besides, no license problem they have if I make them by myself d(^o^).

   Now, I’ll begin.

**Step by step**

1. I wrote 31 funny letters by my hand like this ☞ . Ha ha ha.
2. Scan my handwriting and save it as a png file. If your scanner doesn’t have a saving feature as png files, you need an images converter to make a png file. Of course you can use Inkscape as the converter.
3. Modify each character to each ping file (1000 pixels x 1000 pixels). Only “p” and “w” are 500 pixels x 1000 pixels.
4. All this ping files are bitmap image files, so I need to change them to vector image files. Download inkscape-0.48.4-1-win32.7z for my Windows8 x86.
5. Extract inkscape-0.48.4-1-win32.7z to an appropriate place.
6. Run inkscape.exe.
   1. Open one of the png files. Click on the image to focus.
   2. To trace a bitmap, call up the Trace Bitmap dialog (Path → Trace Bitmap). Click [OK]. Close the Trace Bitmap dialog.
   3. Simplify path (Path → Simplify). Save it as an Inkscape SVG file.
   4. Repeat 1-3 about all png files.
      [Note] If you need to create a vector image by manual, keep this in your mind. When you draw outline of the glyph, you do always see the glyph body at the right side and the empty area at the left side. See the right image.
7. Download setup-x86.exe (32-bit installation) See the edit. You can use FontForge for Windows.
8. Install cygwin by following FontForge install procedures for cygwin under MS Windows. Actually, I installed and ran FontForgeSetup_2012-07-31_Windows.exe before this. But, unfortunately it didn’t work well on my Windows8 x86.
9. Run setup-x86.exe.
   • At “Choose A Download Source”, Select “Install from Internet”.
   • At “Install For”, select “All Users”. Avoid the folder that name includes spaces, for example “Program Files”.
   • At “Internet Connection”, select “Direct Connection”.
   • At “Choose A Download Site”, chose a server you prefer.
   • At “Select Packages”, change X11 preference from “Defalt” to “INstall”.
   • Now, install.
10. Download fontforge_cygwin-20090914.tar.bz2.
11. Move fontforge_cygwin-20090914.tar.bz2 to cygwinhome<username>.
12. Install FontForge.
    Open a cygwin window (by clicking on the cygwin icon).
    1. $ bunzip2 fontforge_cygwin-*.tar.bz2
    2. $ tar xf fontforge_cygwin-*.tar
    3. $ cd fontforge
    4. $ ./doinstall
    5. $ cat >> ~/.bashrc
       PATH=${PATH}:/usr/local/bin ; export PATH
       MANPATH=${MANPATH:-}:/usr/local/man ; export MANPATH
       export LANG=ja
    6. $ exit
13. Download mplus_bitmap_fonts-2.2.4.tar.gz.
14. Move mplus_bitmap_fonts-2.2.4.tar.gz to cygwinhome<username>.
15. Open a cygwin window (by clicking on the cygwin icon).
1. $ tar zxvf mplus_bitmap_fonts-2.2.4.tar.gz
2. $ cd mplus
3. $ ./install_mplus_fonts
4. $ cd ..
5. $ cat >> ~/.bashrc
   xset fp+ /usr/X11R6/lib/X11/fonts/mplus
6. $ exit

   Now, I can use FontForge.

**Ref. URLs
　　　FontForge install procedures for cygwin under MS Windows (The original page does not exist anymore. This is Internet Archive’s. – 2014.11.7)
　　　FontForgeを使う (Japanese)

   Hey guys, I have good news for you. Now, we can use FontForge for Windows with no pains. At this time, its version is 20-06-2014.