Javascript: External fonts with document.write

Question

how can you use external fonts with document.write. For Example if I want to write document.write("Hello").

1. Don't use `document.write`. 2. The two issues are unrelated. — Evan Davis, Nov 29 '14 at 18:17
@DanielKilimnik [this](http://stackoverflow.com/a/25398255/2333214) might help... — T J, Nov 29 '14 at 18:54

score 2 · Accepted Answer · answered Nov 29 '14 at 18:20

2

The write method just puts code in the page, so to use a specific font you would output code that makes the browser use that font when displaying that output.

If the output is in the content of the page, you can use HTML styling to specify the font. Example:

document.write('<span style="font-family:Arial,sans-serif">Hello</span>');

You can also consider other methods of putting the content in the page. You can for example use the innerHTML property to put content in an element, and make sure that the element already has the desired styling. Example:

CSS:

#message { font-family: Arial, sans-serif; }

HTML:

<div id="message"></div>

Javascript (to run after the element exists):

document.getElementById('message').innerHTML = 'Hello';

answered Nov 29 '14 at 18:20

Guffa

687,336
108
737
1,005

But I want to use external fonts. – Daniel Kilimnik Nov 29 '14 at 18:23
@DanielKilimnik: Then that has nothing to do with how you put the content in the page. You would use the `@font-face` style to import a font, then you just use the `font-family` style to use that font just like any other font. Usually you would use a ready-made font kit with fonts in different formats for different browsers, which comes with a CSS file with code for importing the fonts. – Guffa Nov 29 '14 at 18:28
And the text is a variable. – Daniel Kilimnik Nov 29 '14 at 18:29
@DanielKilimnik: In the first example you would concatenate the text with the HTML code: `document.write('' + text + '');`. In the second example you can just use the variable instead of the literal string. – Guffa Nov 29 '14 at 18:31

score 0 · Answer 2 · answered Nov 29 '14 at 18:32

There are multiple ways of using other fonts in HTML, and subsequently, JavaScript. But it's a good practice to always declare fonts in your CSS, so I think your going at it a bit backwards. One way is to have your font somewhere in your project and link to it using css to declare the font in the following manner. You could assign the font to anything, not just @font-face. It could be p, or li, or any other elements:

@font-face {
    font-family: myFont;
    src: url(<path-to-my-font>/myFont.ttf);
}

Another way is to link to some service like Google Fonts. You can add something like this in your HTML header. This example is for a font called "IM Fell English":

<link href='http://fonts.googleapis.com/css?family=IM+Fell+English' rel='stylesheet'

type='text/css'>

However, if you must you could use something like this example provided by W3Schools.com:

document.getElementById("myElement").style.fontFamily="Impact,Charcoal,sans-serif";
myElement.innerHTML = "Hello";

And this should write hello to that document with the specified font, provided it is visible tto your project. Hope this helps :)

Javascript: External fonts with document.write

2 Answers2