JavaScript String fontcolor() Method

What You’ll Learn

String.prototype.fontcolor() is a deprecated HTML wrapper method (same API as MDN String.prototype.fontcolor()). It returns a string that wraps your text in a <font color="..."> tag. Learn color names vs hex triplets, quote escaping, why that element is obsolete, and how to replace it with CSS color — with five examples and try-it labs.

Introduction

Early JavaScript included helpers that wrapped text in HTML presentation tags — fontcolor(), fontsize(), bold(), fixed(), and others. They made it easy to inject markup with innerHTML.

Today those wrappers are deprecated. fontcolor() still works in browsers for compatibility, but the <font> element itself was removed from HTML. Text color belongs in CSS.

This page is part of JavaScript String Methods. Related topics include fixed() and bold().

Understanding the fontcolor() Method

Calling str.fontcolor(color) does not create a live DOM node. It concatenates an HTML string: an opening <font color="..."> tag, the original text, and a closing </font>.

• It is an instance method on strings (auto-boxed if needed).
• It returns a new string — the original is unchanged.
• Double quotes inside color become ".
• No color validation — invalid values are still pasted into the attribute.
• Prefer CSS color for real UI.

📝 Syntax

General form of String.prototype.fontcolor:

str.fontcolor(color)

Parameters

• color — a string (or value coerced to string) used as the color attribute. Typically a CSS color name ("red") or a hex RGB triplet without # ("FA8072").

Return value

Always an HTML string wrapped in <font color="...">. Special cases:

Common patterns

"Hello, world".fontcolor("red");
// 'Hello, world'

"Title".fontcolor("ff00dd");
// 'Title'

"Hi".fontcolor('red"blue');
// 'Hi'

// Prefer this in new code:
const el = document.getElementById("yourElemId");
el.style.color = "red";

Examples Gallery

Examples follow MDN String.fontcolor() patterns. Use View Output or Try It Yourself for each case.

const contentString = "Hello, world";
contentString.fontcolor("red");
// 'Hello, world'

<font color="red">Hello, world</font>

// Salmon: red=FA, green=80, blue=72
"Hello".fontcolor("FA8072");
// 'Hello'

"Hello".fontcolor("ff00dd");
// 'Hello'

<font color="FA8072">Hello</font>
<font color="ff00dd">Hello</font>

"Hi".fontcolor('red"blue');
// 'Hi'

"".fontcolor("navy");
// ''

"A".fontcolor(123);
// 'A'

<font color="red&quot;blue">Hi</font>
<font color="navy"></font>
<font color="123">A</font>

const contentString = "Hello, world";
const html = contentString.fontcolor("red");
// document.body.innerHTML = html;  // legacy pattern — avoid in new apps

console.log(html);
// Warning:  is not a valid element in modern HTML

<font color="red">Hello, world</font>
(invalid modern markup — <font> was removed from HTML)

const el = document.createElement("p");
el.textContent = "Hello, world";
el.style.color = "red";

// document.body.appendChild(el);
console.log(el.style.color);
console.log(el.outerHTML);

// Hex works the modern way too:
el.style.color = "#FA8072";

red
<p style="color: red;">Hello, world</p>

🚀 Common Use Cases

• Reading legacy tutorials — recognize HTML wrapper methods in old samples.
• Migrating old scripts — replace fontcolor() with CSS color.
• Teaching string immutability — show that methods return new strings.
• Not for new apps — do not use fontcolor() to theme UI text.
• Design systems — use color tokens / CSS variables instead.
• Safer markup — prefer textContent + CSS over innerHTML strings.

📝 Notes

• fontcolor() is deprecated — standardized only for compatibility.
• The <font> element was removed from the HTML specification.
• It returns a string, not a DOM node.
• It does not validate the color value.
• Hex triplets traditionally omit # in this legacy API.
• Other HTML wrappers (fontsize(), fixed(), bold(), …) share the same fate.
• Avoid assigning untrusted strings to innerHTML.

💡 Best Practices