A
CUSTOM FONT CREATOR
SAMPLES ￨
TECHINFO ￨
This image shows a panel of glyphs as they were constructed.
Glyphs with curved contours need several defining points to outline their shape. The final glyphs rendered as text, can be seen in the FOUR METRY, MULTI PLANAR, and PEDESTAL fonts, in the Samples gallery. The site's logo itself is a glyph assigned to letter A in a custom font.
TECHNICAL INFO
Inside Custom Font Creator
Custom Font Creator (CFC) uses multiple technologies and techniques to provide
its web-based font-creation capability. Some of these technologies are backed
by strong specifications, while others are new and have been composed together
by CFC in a unique way to serve our type-enthusiast community.
CORE APPLICATION
Custom Font Creator (CFC) runs entirely with client-side Javascript (JS) code
inside the browser. CFC does not use a server-side web application framework
(like Node) or a client-side one (like
React). CFC uses the native web platform's
built-in facilities for vector graphics (the HTML5 Canvas API), with JS's ArrayBuffers and
DataViews for low-level memory and binary processing. CFC is hosted on Microsoft Azure
as a
Static Web App with a single HTML and JS file.
UNIQUE TECHNOLOGY
Software libraries such as FreeType exist for processing glyph shapes,
but they are integrated inside licensed software, operating systems or progamming environments like
Python and Java. Primarily used by layout engines in text-editors and document-viewers, these libraries
are not designed for creative font creation on an open platform such as the Web. Open-source libraries
like opentype.js, can read glyph data and do limited edits -
see websites like Transfonter and
Fontdrop that use this library. Professional typographers can
edit font information on the Web but these are limited to font-subsetting and metrics adjustments
in existing fonts. In this space, CFC introduces the ability to create fresh new glyphs - and fonts
- all on the Web, for type enthusiasts and typographers alike.
CURVE GEOMETRY
Custom Font Creator originally stored glyph outlines in Apple's TrueType font files -
which only support degree-2 quadratic curves. To support a degree-3
Bézier curve,
it was decomposed into two degree-2 curves by using the simple
deCasteljau
curve evaluation algorithm and then synthesized into virtual on-curve and off-curve
points. The approach is approximate and the results were not impressive - for test
curves with high curvature
radius or inflection. Better parametric approximation techniques exist but CFC
does not use them. Instead, CFC now stores glyphs with Béziers in Adobe's
CFF format embedded inside an OpenType structure that itself is embedded
within an outer web-compatible WOFF file container.
GLYPH CONSTRUCTION IMAGES
This image shows a panel of glyphs as they were constructed.
Glyphs with curved contours need several defining points to outline their shape. The final glyphs rendered as text, can be seen in the FOUR METRY, MULTI PLANAR, and PEDESTAL fonts, in the Samples gallery. The site's logo itself is a glyph assigned to letter A in a custom font.
PROPRIETARY CODE
Custom Font Creator (CFC) uses the official specifications of
Apple's
TrueType,
Microsoft's
OpenType
and W3C's
WOFF 1.0 formats,
to create font files directly in memory, inside the browser. CFC is able to adjust
and interpolate specific low-level geometry inside the font file. The code to encode
glyph geometry information into a binary font file was first written and validated
in C++ (first language at school), and was then carefully converted into Javascript
ArrayBuffers,
Uint8Arrays and
DataViews for web use. This was done one font-table, one encoding and one curvetype at a time,
each time ensuring that the results on the Web were consistent in memory-layout and
endianness.
FUTURES
Although 2D transformation matrices are sufficient,
quaternions (with linear interpolation)
were used, as a learning opportunity, to implement the effects of a contour's
T (Transform) button. Creating 3D-looking letterforms required time and effort.
See these glyphs from the sample MULTI PLANAR font.
Each glyph requires several contours with fine-grained adjustments and matching.
Using quaternions eases future work in the 3D domain. The idea is to build or
import a 3D model of a letterform into a WebGL 3D canvas, pick a camera position
and orientation, and mathematically project the model onto a 2D surface orthogonal
to the camera's view-vector on to the other side of the model.
Each glyph requires several contours with fine-grained adjustments and matching.
Using quaternions eases future work in the 3D domain. The idea is to build or
import a 3D model of a letterform into a WebGL 3D canvas, pick a camera position
and orientation, and mathematically project the model onto a 2D surface orthogonal
to the camera's view-vector on to the other side of the model.
REFERENCES and CREDITS
Specifications:
* World Wide Web Consortium
Web Open File Format (WOFF 1.0),
* Unicode Consortium
Code Charts
Geometry and Graphics:
*
Farin, Gerald.
Curves and Surfaces for CAGD: A Practical Guide. 5th Edn. Morgan Kaufmann, 2001.
* Hanson A, Cunningham S.
Visualizing Quaternions.
Morgan Kaufmann, 2006.
*
Kuipers JB.
Quaternions and Rotation Sequences: A Primer
with Applications to Orbits, Aerospace and Virtual Reality.
Princeton University Press, 2020.
* Anton H, Bivens IC, Davis S.
Calculus: Multivariable. 12th Edn. Wiley, 2021.
* Stanford ULO
Multivariable Differential Calculus XM521, 2025.
Type and the Web platform:
*
Rutter, R.
Web Typography: A handbook for designing beautiful and effective typography in responsive websites.
Ampersand Type, 2017.
* Flanagan, D.
JavaScript: The Definitive Guide.
7th Edn. O'Reilly Media, 2020.
*
Geary, D.
Core HTML5 Canvas: Graphics, Animation, and Game Development.
Pearson PTR, 2012.
*
Meyer E, Weyl, Estelle.
CSS: The Definitive Guide: Web Layout and Presentation.
5th Edn. O'Reilly Media, 2023.
HELP
HELP
Using the Custom Font Creator to define your font
A font is a file containing geometrical descriptions of various letterforms.
These are known as glyphs and and are stored as curved outlines in the file.
On this site, we will first select a letter and then define a glyph for the
letter by drawing outlines on a grid.
SELECTING a LETTER
On the panel with blue letter buttons, click a letter to select it.
A grid opens up below, where you are now ready to define a glyph for this letter.
You can define glyphs for up to 12 letters. After completing a glyph, you can
select and define glyphs for more letters. A small white triangle at the bottom
right of a letter indicates this letter has a defined glyph.
GEOMETRY of a GLYPH
A glyph (letterform) is composed on one or more contours.
Each contour is a closed outline, made up of curves connected one after the other.
glyph = contour1 + contour2 + ...
contour = curve1 + curve2 + ...
curve = polyline or quadratic or Bézier
A polyline is simply a series of line segments.
A quadratic curve is defined by three points - a start point, a control point and an endpoint.
A cubic Bézier curve is defined by four points - the start and end points, and two control points. The control points allow you to define and adjust the curve's shape and curvature.
A quadratic curve is defined by three points - a start point, a control point and an endpoint.
A cubic Bézier curve is defined by four points - the start and end points, and two control points. The control points allow you to define and adjust the curve's shape and curvature.
DRAWING a GLYPH
You begin a glyph by drawing its first contour.
Click the Add Contour button.
Click the Add Contour button.
Pick the Polyline option, and click the first point on the grid.
From here on, click additional points in sequence to define a series of connected line segments. When done, right-click to complete your polyline.
From here on, click additional points in sequence to define a series of connected line segments. When done, right-click to complete your polyline.
Pick the Quadratic curve option.
If no other curve exists on the grid, click your first point on the grid.
Click next to set a control point. This is shown with a dotted line and a hollow cirle. Click next to set the final third point of this curve.
If no other curve exists on the grid, click your first point on the grid.
Click next to set a control point. This is shown with a dotted line and a hollow cirle. Click next to set the final third point of this curve.
Pick the Bézier option. Drawing this curve is similar to the quadratic curve.
Click further to set two control points, and the final fourth point.
After you have added curves to your contour, click the
Close Contour button to finalize.
Drawing a new contour in the opposite direction (clockwise or counterclockwise)
of the previous one, will cut a contour-shaped hole in the glyph.
EDITING a GLYPH
You can hover the mouse over any point on the glyph and drag to move it.
Each contour is listed in the right pane, with a
Delete and
Transform button.
Use the Transform button to adjust your contour as a whole.
Use the Transform button to adjust your contour as a whole.
You can add additional contours to this glyph with the
Add Contour button.
VIEWING GLYPHs
Open the Display Text tab below the grid.
Type in some letters you have defined glyphs for and click the Apply Font button.
Type in some letters you have defined glyphs for and click the Apply Font button.
GENERATING a FONT FILE
Open the Font Information tab below the grid.
Name your font and add details you need stored inside the font file.
Click the Download Font button to generate and download the WOFF font file.
Name your font and add details you need stored inside the font file.
Click the Download Font button to generate and download the WOFF font file.
USING the FONT FILE on your own WEBPAGE
Use the WOFF font file, like any other web font, with an
@font-face
CSS declaration. Here is a simple example:
CSS
@font-face {
font-family: 'Astra';
src: url("astraregular.woff") format('woff');
}
.astrafont {
font-family: 'Astra', serif;
}
HTML
<span class="astrafont">ABCD</span>
What is a font?
A font is a collection of figures (glyphs). Each glyph is associated with a character (letter). For instance, the typeface Science Gothic below associates the letters A and E with specific glyphs in its font file. The typeface Geo assigns different glyphs for those letters in its font file.What does Custom Font Creator do?
You can draw and associate your own glyphs to 12 letters (A up to L) of the Latin alphabet. You can preview your new glyphs with sample text and generate your own standard Web Open Font Format (WOFF) file, all within the browser.You own the license to the generated font file and you can use it on your own webpages.
The ability to create custom glyphs in a universal WOFF file opens up new
creative possibilities for the typography community. From casual to branding use,
you can now create letterforms that are uniquely yours
and not available in fonts elsewhere.
Select a letter to add to your font:
| Draw a glyph for this letter on the grid below | |
POINT:
0, 0
0, 0
GLYPH:
0 contours
FONT INFORMATION
|
DISPLAY TEXT
|
Font family:
Font subfamily
Font fullname:
Font version:
Copyright:
Trademark:
License:
Type text below with letters you have designed glyphs for:
COLOR:
ENTERED TEXT ￨