Permalink
Browse files

use custom font for suit symbols

  • Loading branch information...
1 parent 8867da4 commit 66959625d6e6172063b84b06c7ca11ef17a31694 @donpark committed Oct 11, 2012
View
@@ -0,0 +1 @@
+attic
View
@@ -0,0 +1,16 @@
+# Suit font
+
+Suit font was created in following steps, documented here for the purpose of maintenance:
+
+1. Isolate suit symbols from Chris Aguilar's [vectorized-playing-cards](http://code.google.com/p/vectorized-playing-cards/) SVG files as individual SVG files of same dimensions as Arial suit characters in points (height of 2048 and varying widths).
+
+2. Using trial version of [Glyphs](http://glyphsapp.com/) for Mac, created new font with same metrics.
+
+3. Create four new glyphs mapped to appropriate Unicode codepoints (spade=U+2660,club= U+2663, heart=U+2665, diamond=U+2666).
+
+4. Import suit symbols in SVG format to corresponding glyphs then position them to approximately same position as Arial suit characters.
+
+5. Save as `suite.glyphs` and Export to `Suit-Regular.otf` file.
+
+6. Use [CodeAndMore @font-face generator](http://fontface.codeandmore.com/) to convert `Suit-Regular.otf` to a set `@font-face` compatible set of font files.
+
View
Binary file not shown.
View
@@ -0,0 +1,222 @@
+{
+date = "2012-10-11 19:06:13 +0000";
+familyName = "Suit";
+fontMaster = (
+{
+ascender = 1491;
+capHeight = 1467;
+customParameters = (
+{
+name = TypoAscender;
+value = 1491;
+},
+{
+name = TypoDescender;
+value = "-431";
+},
+{
+name = postscriptUnderlinePosition;
+value = "-217";
+}
+);
+descender = "-431";
+id = "0F06F2DC-35B2-453E-9B4A-C1D327514268";
+weightValue = 400;
+widthValue = 5;
+xHeight = 1062;
+}
+);
+glyphs = (
+{
+glyphname = clubsuitblack;
+lastChange = "2012-10-11 12:52:39 -0700";
+layers = (
+{
+layerId = "0F06F2DC-35B2-453E-9B4A-C1D327514268";
+name = Regular;
+paths = (
+{
+closed = 1;
+nodes = (
+"578 123 OFFCURVE",
+"623 250 OFFCURVE",
+"629 384 CURVE",
+"637 435 OFFCURVE",
+"606 435 OFFCURVE",
+"603 398 CURVE",
+"516 67 OFFCURVE",
+"50 157 OFFCURVE",
+"67 471 CURVE SMOOTH",
+"81 724 OFFCURVE",
+"334 780 OFFCURVE",
+"466 696 CURVE SMOOTH",
+"516 665 OFFCURVE",
+"513 685 OFFCURVE",
+"485 716 CURVE SMOOTH",
+"289 935 OFFCURVE",
+"410 1216 OFFCURVE",
+"674 1221 CURVE",
+"960 1205 OFFCURVE",
+"1033 901 OFFCURVE",
+"859 724 CURVE SMOOTH",
+"836 705 OFFCURVE",
+"789 634 OFFCURVE",
+"859 685 CURVE",
+"1039 809 OFFCURVE",
+"1283 674 OFFCURVE",
+"1277 480 CURVE SMOOTH",
+"1269 123 OFFCURVE",
+"834 95 OFFCURVE",
+"738 396 CURVE",
+"730 427 OFFCURVE",
+"704 443 OFFCURVE",
+"713 387 CURVE SMOOTH",
+"724 286 OFFCURVE",
+"752 132 OFFCURVE",
+"828 0 CURVE",
+"516 0 LINE"
+);
+}
+);
+width = 1344;
+}
+);
+unicode = 2663;
+},
+{
+glyphname = diamond;
+lastChange = "2012-10-11 13:02:34 -0700";
+layers = (
+{
+layerId = "0F06F2DC-35B2-453E-9B4A-C1D327514268";
+name = Regular;
+paths = (
+{
+closed = 1;
+nodes = (
+"268 792 OFFCURVE",
+"403 1010 OFFCURVE",
+"531 1219 CURVE",
+"644 989 OFFCURVE",
+"806 787 OFFCURVE",
+"981 592 CURVE",
+"794 398 OFFCURVE",
+"649 191 OFFCURVE",
+"532 -26 CURVE",
+"403 197 OFFCURVE",
+"266 399 OFFCURVE",
+"63 592 CURVE",
+"63 592 LINE"
+);
+}
+);
+width = 1045;
+}
+);
+unicode = 2666;
+},
+{
+glyphname = heartsuitblack;
+lastChange = "2012-10-11 12:56:27 -0700";
+layers = (
+{
+layerId = "0F06F2DC-35B2-453E-9B4A-C1D327514268";
+name = Regular;
+paths = (
+{
+closed = 1;
+nodes = (
+"498 1244 OFFCURVE",
+"581 1108 OFFCURVE",
+"597 1000 CURVE",
+"607 983 OFFCURVE",
+"613 988 OFFCURVE",
+"616 1001 CURVE",
+"624 1139 OFFCURVE",
+"748 1252 OFFCURVE",
+"862 1237 CURVE",
+"1048 1234 OFFCURVE",
+"1161 1027 OFFCURVE",
+"1130 882 CURVE SMOOTH",
+"1084 667 OFFCURVE",
+"975 538 OFFCURVE",
+"888 405 CURVE",
+"789 268 OFFCURVE",
+"656 69 OFFCURVE",
+"613 -26 CURVE",
+"613 -26 OFFCURVE",
+"478 179 OFFCURVE",
+"302 421 CURVE SMOOTH",
+"184 583 OFFCURVE",
+"92 759 OFFCURVE",
+"81 910 CURVE SMOOTH",
+"71 1052 OFFCURVE",
+"142 1207 OFFCURVE",
+"338 1234 CURVE",
+"338 1234 LINE"
+);
+}
+);
+width = 1216;
+}
+);
+unicode = 2665;
+},
+{
+glyphname = spadesuitblack;
+lastChange = "2012-10-11 12:50:03 -0700";
+layers = (
+{
+layerId = "0F06F2DC-35B2-453E-9B4A-C1D327514268";
+name = Regular;
+paths = (
+{
+closed = 1;
+nodes = (
+"503 401 OFFCURVE",
+"469 401 OFFCURVE",
+"472 373 CURVE SMOOTH",
+"469 227 OFFCURVE",
+"344 154 OFFCURVE",
+"252 170 CURVE SMOOTH",
+"112 198 OFFCURVE",
+"68 336 OFFCURVE",
+"70 417 CURVE SMOOTH",
+"73 670 OFFCURVE",
+"328 855 OFFCURVE",
+"557 1177 CURVE",
+"724 886 OFFCURVE",
+"1000 657 OFFCURVE",
+"1016 433 CURVE SMOOTH",
+"1040 133 OFFCURVE",
+"659 22 OFFCURVE",
+"604 370 CURVE SMOOTH",
+"602 393 OFFCURVE",
+"573 407 OFFCURVE",
+"576 370 CURVE SMOOTH",
+"583 276 OFFCURVE",
+"570 234 OFFCURVE",
+"680 1 CURVE",
+"398 1 LINE",
+"461 110 OFFCURVE",
+"498 245 OFFCURVE",
+"503 362 CURVE SMOOTH"
+);
+}
+);
+width = 1088;
+}
+);
+unicode = 2660;
+}
+);
+disablesNiceNames = 1;
+instances = (
+{
+name = Regular;
+}
+);
+unitsPerEm = 2048;
+versionMajor = 1;
+versionMinor = 1;
+}
View
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="1344px" height="2048px" viewBox="0 0 1344 2048" style="enable-background:new 0 0 1344 2048;" xml:space="preserve">
+<path d="M522,1635c62-123,107-250,113-384c8-51-23-51-26-14c-87,331-553,241-536-73c14-253,267-309,399-225c50,31,47,11,19-20
+ c-196-219-75-500,189-505c286,16,359,320,185,497c-23,19-70,90,0,39c180-124,424,11,418,205c-8,357-443,385-539,84c-8-31-34-47-25,9
+ c11,101,39,255,115,387H522z"/>
+</svg>
View
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="1045px" height="2048px" viewBox="0 0 1045 2048" style="enable-background:new 0 0 1045 2048;" xml:space="preserve">
+<path d="M64,1029c205-200,340-418,468-627c113,230,275,432,450,627c-187,194-332,401-449,618C404,1424,267,1222,64,1029L64,1029z"/>
+</svg>
Binary file not shown.
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+ <html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>CodeAndMore @font-face Demo</title>
+ <style type="text/css">
+ @font-face {
+ font-family: 'Suit-Regular';
+ src: url('fonts/suit-regular.eot');
+ src: url('fonts/suit-regular.eot?#iefix') format('embedded-opentype'),
+ url('fonts/suit-regular.woff') format('woff'),
+ url('fonts/suit-regular.ttf') format('truetype'),
+ url('fonts/suit-regular.svg#suit-regular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ }
+ </style>
+ </head>
+
+ <body style="font-family:'Suit-Regular'; padding: 20px; text-align: center;">
+ <p style="font-size: 1em">&spades;&clubs;&hearts;&diams;</p>
+ <p style="font-size: 2em">&spades;&clubs;&hearts;&diams;</p>
+ <p style="font-size: 3em">&spades;&clubs;&hearts;&diams;</p>
+ <p style="font-size: 4em">&spades;&clubs;&hearts;&diams;</p>
+ <p>Created by <a href="http://fontface.codeandmore.com">@font-face generator</a> on <a href="http://codeandmore.com">CodeAndMore</a> based on open source tools.</p>
+ </body>
+ </html>
+
@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" > <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+<defs >
+<font id="suit-regular" horiz-adv-x="1173" ><font-face
+ font-family="Suit"
+ units-per-em="2048"
+ panose-1="0 0 5 0 0 0 0 0 0 0"
+ ascent="2027"
+ descent="-431"
+ alphabetic="0" />
+<missing-glyph horiz-adv-x="500" d="M0 0V700H500V0H0ZM250 395L420 650H80L250 395ZM280 350L450 95V605L280 350ZM80 50H420L250 305L80 50ZM50 605V95L220 350L50 605Z" />
+</font>
+</defs>
+</svg>
Binary file not shown.
Binary file not shown.
View
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="1216px" height="2048px" viewBox="0 0 1216 2048" style="enable-background:new 0 0 1216 2048;" xml:space="preserve">
+<path d="M330,404c160-10,243,126,259,234c10,17,16,12,19-1c8-138,132-251,246-236c186,3,299,210,268,355c-46,215-155,344-242,477
+ c-99,137-232,336-275,431c0,0-135-205-311-447C176,1055,84,879,73,728C63,586,134,431,330,404L330,404z"/>
+</svg>
Oops, something went wrong.

0 comments on commit 6695962

Please sign in to comment.