How to bind a new web font to an open html page?

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 :)

I suspect you've misunderstood what "live binding" is, but I can't find any documentation about it. Where did you read this? — Quentin, May 21 '14 at 11:09
@Quentin i have read this here [link](http://www.macg.co/logiciels/2014/05/chrome-35-la-version-stable-disponible-pour-os-x-82082) but it is in french sorry — Lefty, May 21 '14 at 13:30
It looks like [this is the relevant specification](http://dev.w3.org/csswg/css-font-loading/). It does a number of different things, but "dynamically altering the CSS to include a new @font-face rule" isn't something you couldn't do already AFAIK. — Quentin, May 21 '14 at 13:37

Mohsen ZareZardeyni · Answer 1 · 2014-05-21T11:19:18.333

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!

edited May 21 '14 at 11:19

answered May 21 '14 at 11:05

Mohsen ZareZardeyni

936
7
17

1

The question is asking about using JS to add a web font to an already loaded page. – Quentin May 21 '14 at 11:07
and you can create an stylesheet with js! use docuement.createStylesheet! or $(document.createElement('link')) – Mohsen ZareZardeyni May 21 '14 at 11:11
Try forming that into a proper answer instead of a comment. – Quentin May 21 '14 at 11:12
@Mohsen89z i prefer the way you describe it, with just javascript but could you make an answer with example, instead of a comment. thanks anyway – Lefty May 21 '14 at 13:37
Just a stupid (or not) question i should have ask from the start, does it work the same for AngularJS – Lefty May 21 '14 at 14:29

score 0 · Answer 2 · edited May 23 '17 at 12:30

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; } or js (example above)

As note, I have to say: this is NOT new. You can vote negative to a valid answer anyway. There is no need to create `` tags if you use js directly — kosmos, May 21 '14 at 11:27

How to bind a new web font to an open html page?

2 Answers2