如何将新的Web字体绑定到打开的html页面？

Question

i'm not sure if it's the right place to post this question ?

I've read this morning that the new version of Chrome support live binding web font.

Is there a trick javascript, dom manipulation, Amberjs or Jquery plug-in to do the same to the browser that doesn't support that feature yet (to add a new web font in a open page in the browser and have access to it, i mean without to have to change the css and reload the page ?)

thanks :)

Answer 1

Try this:

var newStyleText = "@font-face {" +
"font-family: myFirstFont;" +
"src: url(your-font.css);" +
"}"

var newStyle = $(document.createElement("style");
newStyle.html(newStyleText);
$(document.head).append(newStyle)

every element with font-family: myFirstFont; while use your font!

Answer 2

As @Mohsen89z said, you can use @font-face.

Cite from w3schools:

The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support the WOFF (Web Open Font Format) font.

Firefox, Chrome, Safari, and Opera also support fonts of type TTF (True Type Fonts) and OTF (OpenType Fonts).

Chrome, Safari and Opera also support SVG fonts/shapes.

Internet Explorer also supports EOT (Embedded OpenType) fonts.

Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.

Anyway, there is a trick to use on IE previous versions. Check this link .

Then, if you want to change the font, use JS for that. Example with jQuery:

$('.myparagraph').css('font', 'normal "Your fav font", sans-serif');

To extend my asnwer, I recommend you to use Google Fonts to embed all fonts that you need into a single tag line, like:

<link href='http://fonts.googleapis.com/css?family=Finger+Paint|Gloria+Hallelujah|Open+Sans' rel='stylesheet' type='text/css'>

Then, you can use it directly from your css .mydiv { font-family: "Open Sans", sans-serif; } .mydiv { font-family: "Open Sans", sans-serif; } or js (example above)