Load external font with javascript and jquery

Question

I have a < p > element created dynamically with jquery, and I want to style it with a custom font that I have on my hard drive.

Could you sugest me a method to load that font and apply it to this element.

Right now, the object looks something like:

$("<p>").css({ fontFamily : "Arial",
               fontSize: "13px",
               color: "#000"});

I want to replace fontFamily : "Arial" with my custom font.

Thanks, Gabriel

Answer 1

This piece of code does all the job:

$("head").prepend("<style type=\"text/css\">" + 
                                "@font-face {\n" +
                                    "\tfont-family: \"myFont\";\n" + 
                                    "\tsrc: local('☺'), url('myFont.otf') format('opentype');\n" + 
                                "}\n" + 
                                    "\tp.myClass {\n" + 
                                    "\tfont-family: myFont !important;\n" + 
                                "}\n" + 
                            "</style>");