Month: March 2014

   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 cygwin\home\<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.