As you know, fonts are kind of binary drawings in the sens that they are lines and shapes filled or not. 0 or 1.
It means a font cannot have a border by defaut. It can be "outlined" but it will always be monochrome.
So in order to get a font with a color and another color for the border, in fact I use 2 fonts : the original one and a reworked version that I "extend" using a free software (revised BSD Licence) FontForge. And of course, I use @font-face (and a font-face generator here )
For this example, I have taken CooperBlackStd.otf from my Windows' fonts directory
Get the default font @font-face
To do this, I open the ODT file using FontForge. Then I export the font in the TTF format (File>Generate Font...)

Then, thanks to http://convertfonts.com/, a font-face generator, I get all I need in order to use this font in my website (css, woff, eot..)
Extend the default font
Here comes the process which extends the font shape (keeping the same "font-size"):
Going to menu (Edit>Selection>True Glyphs) we select all the used glyphs in the font map

Going to menu (Element>Extend line...), opens a box as show below. Set the main stroke width and the minor stroke height. It will determinate kind of border width. Then, in order to have lighter output font file, I suggest to check "remove border inside (or something like that...shown at the bottom of the picture below)

Last thing is to generate a new font name. To do that go to the menu (Element>Font Infos...). Then set the new font name (here I set CooperBlackStdBorder...)

Get the new font's @font-face
Follow the same step as for the default font.
Code :
First, we must link the 2 font's style sheets, for example like that :
<link type="text/css" rel="stylesheet" href="assets/code/bordered-fonts/font-face/cooperblackstd.css" /> <link type="text/css" rel="stylesheet" href="assets/code/bordered-fonts/font-face/cooperblackstdborder.css" />
Then I use here this method to get both elements well adjusted:
<div style="height:40px;"> <span style="font-family:'CooperStdBlackBorder';font-size:42pt;color:#ff99ff;position:absolute;">Text border</span> <span style="font-family:'CooperStdBlack';font-size:42pt;color:#cc3399;position:absolute;">Text border</span> </div>
This way, you get a selectable smooth nice custom border.
Commentaires
Laisser un commentaire