set font-face/font-family using setAttribute (javascript)

Question

I am creating and styling a div using javascript like this:

var div = document.createElement("div");
div.setAttribute('style',  'box-shadow: 10px 10px 50px #888888; \
                            background-color: #ffb734; \
                            etc...
                           ');

I have to do it this way as I am inserting the div from a chrome extension content script.

How can I change the font face, if I have downloaded a font myFont.ttf to the same directory?

Here is what I've tried:

var div = document.createElement("div");
div.setAttribute('style',  'box-shadow: 10px 10px 50px #888888; \
                            background-color: #ffb734; \
                            @font-face {\
                                font-family: '" + 'openSans' + "'; \
                                src: url('" + 'OpenSans-Semibold.ttf' + "') \
                            } \
                           ');

But this breaks the div (it stops showing up)

Thanks in advance!

p.s. Is it a better approach to instead make a css file and include it in my manifest?

Knu · Accepted Answer · 2016-03-19 10:31:39Z

3

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces).

That means that at-rules are not allowed in that context.

answered Mar 19, 2016 at 10:31

Knu

15.2k6 gold badges60 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Noam Hacker Over a year ago

Thanks, so is there an alternative method for this context?

Knu Over a year ago

@NoamHacker you can use the font or font-family properties, that's it. If you are limited to javascript solutions, you should probably check the FontFaceSet interface.

Community · Accepted Answer · 2017-05-23 12:15:51Z

Are you trying to build a dynamic text box the user can change? If so this answer will guide you through creating one, https://stackoverflow.com/a/8957518/5914723

If not, then here is some JS that will modify a div. You're modifying the HTML DOM with this code, HTML and CSS. https://jsfiddle.net/Dneilsen22/ohodgo7u/

HTML: empty div

<div id="changeMe"></div>

JS

var changeMe = document.getElementById("changeMe");
changeMe.innerHTML = "You can style me too!";
document.getElementById("changeMe").style.font = "bold 40px serif";

Haibara Ai · Accepted Answer · 2016-03-18 09:25:39Z

0

font-face should be specified in an external css file, yes, it's a better approach to make a css file and include it in your manifest.

BTW, use + rather than \ to break the string in multi lines. The latter is not preferred.

answered Mar 18, 2016 at 9:25

Haibara Ai

10.9k2 gold badges35 silver badges49 bronze badges

Collectives™ on Stack Overflow

set font-face/font-family using setAttribute (javascript)

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related