Justin Dunham

After reading some about embedding fonts I decided to try my hand at embedding fonts in CSS using ColdFusion. I was pretty pleased with the result.  This will not work in IE since Microsoft chooses not to recognize the @font-face property in CSS, for more information on a possible work around for that I recommend reading Jon Tan’s post. I think the hard part of this right now is finding the right font with the right usage license.

Example (Sorry IE…)

The quick brown fox jumps over the lazy dog

Since this is wordpress I used an external style sheet, the code in which is pretty simple.

Code


<cffile action="readBinary" file="#expandPath('./IDAutomation.otf')#" variable="myBinaryFile">
<cfset myFont = toBase64(myBinaryFile)>
<cfcontent type="text/css" reset="yes">@charset "utf-8";
/* CSS Document */
@font-face {
font-family: "IDAutomation";
src: url("data:font/opentype;base64,<cfoutput>#myFont#</cfoutput>");
}
.barcode {
font-family: "IDAutomation", serif;
}