Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Echekwara usoro a. Biko jụọ ajụjụ ọhụrụ ma ọ bụrụ na ị chọrọ enyemaka.

Why <input> and <textarea> have different fonts?

  • 4
  • 1 nwere nsogbu anwere nsogbu a
  • 1 view
  • Nzaghachi ikpeazụ nke Jellby

Jellby
Jellby
more options

I'm using Firefox 32.0.3 under Kubuntu 14.04. This simple document shows the problem: 

<html>
<body>
<p>Test</p>
<p><code>Test</code></p>
<p><input value="Test"></input></p>
<p><textarea></textarea></p>
</body>
</html>

I have set "font.size.fixed.x-unicode" and "font.size.fixed.x-western" to "16", so that the "Test" in <code> shows at the same font size as the text. If I write something in the <textarea>, it shows at the same font size too. But the <input> has a smaller font size, and a different font, actually.

With the element inspector I can see that everything uses DejaVu fonts (I'm not sure why, I don't see where I have set this), but the <input> uses Ubuntu (which is the font set in the KDE preferences).

How can I make sure everything uses the same font and size?

I'm using Firefox 32.0.3 under Kubuntu 14.04. This simple document shows the problem: <pre><nowiki><html> <body> <p>Test</p> <p><code>Test</code></p> <p><input value="Test"></input></p> <p><textarea></textarea></p> </body> </html></nowiki></pre> I have set "font.size.fixed.x-unicode" and "font.size.fixed.x-western" to "16", so that the "Test" in &lt;code&gt; shows at the same font size as the text. If I write something in the &lt;textarea&gt;, it shows at the same font size too. But the &lt;input&gt; has a smaller font size, and a different font, actually. With the element inspector I can see that everything uses DejaVu fonts (I'm not sure why, I don't see where I have set this), but the &lt;input&gt; uses Ubuntu (which is the font set in the KDE preferences). How can I make sure everything uses the same font and size?

Edeziri site na cor-el

All Replies (4)

guigs
guigs
more options

Hi Jellby, Unfortunately there is a wiki mark up in the forums that prevents some html from rendering properly in a post. I would be happy to troubleshoot if you have a url/thimble or jsfiddle example we can collaborate on.

I also recommend either opening a webcompat.com bug with an example or a stackoverflow.com question for a faster response.

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Code uses font-family: -moz-fixed; 

resource://gre-resources/html.css

Input uses font-family: -moz-use-system-font; font-size: medium; 

resource://gre-resources/forms.css

Textarea uses font-family: -moz-fixed; font-size: medium; 

resource://gre-resources/forms.css
Jellby
Jellby Jụọ onye nwe ya ajụjụ
more options

@guigs2 I didn't intend the code to be rendered in the forum, but if you want a live version, maybe this works: http://jsfiddle.net/k87pLhjw/

Edeziri site na Jellby

Jellby
Jellby Jụọ onye nwe ya ajụjụ
more options

@cor-el Is that the intended behaviour? I can see the point both in using the system font and the fixed font, but I don't see why input and textarea should have different choices. Could we count this as a bug? In that case, should I report it?