Anki Input Font Problem

[ibjoe]

I’m using Anki PC Version 2.1.60

My card Styling is:
.card {
font-family: Leelawadee;
font-size: 100px;
text-align: center;
color: black;
background-color: white;}
input {
font-family: Leelawadee;
font-size: 100px;
text-align: center;}

Preview display is good, both the question and the answer input box are large size.

BUT

When I actually study the deck, the answer input box is still the smaller default size.
Input text-align works, but font-family and font-size are broken.

Any ideas how to fix this?

Screenshot Preview:

Screenshot Study:

[jojo55]

I’m not an expert by any means, but usually when I have an issue with styling previewing correctly, but then not being implemented, I try adding !important after it.

I copied your styling with a basic typing deck, and changing font-size: 100px; to font-size: 100px !important; seemed to work for me. You had everything correct, but the styling was getting overwritten somewhere afterwards.

[ibjoe]

jojo55 Thank you! That worked!

My new Styling section is

.card {
font-family: Leelawadee;
font-size: 100px;
text-align: center;
color: black;
background-color: white;}
input {
font-family: Leelawadee !important;
font-size: 100px !important;
text-align: center !important;}

I did not know about “!important”! I don’t find specific reference to it in Anki documents.

However

CSS !important Property

explains it well

[ibjoe]

However, there is still ongoing problem.

While Front preview and Back preview are okay, and Study Front display is okay, after I fill in text and Show Answer, the font size on back is still small.

Front Template is

Back Template is

Front side example (OK now):

Back side examples:
#1 (correct answer):

#2 (incorrect answer):

Any ideas how to fix this?

[jcznk]

Try using #typeans as a selector. It should not be necessary to use !important in this case.
E.g.

#typeans {
 font-family: Leelawadee;
 font-size: 100px;
 text-align: center;
}

After checking with a WebView inspector, I think the reason you need to use !important on the front side is because the default styling is defined inline and thus takes the precedence.

<input type="text" id="typeans" onkeypress="_typeAnsPress();" style="font-family: 'Arial'; font-size: 20px;">

While on the back there is this sort of code:

<div style="font-family: 'Arial'; font-size: 20px">
 <code id="typeans">Typed Answer</code>
</div>

Since the styling is assigned not to the element itself but to the parent div, it can be overriden even without using !important.

Also, as you can see, there is no input element on the back of the card, and this is why using input as a selector did not work.

---

EDIT: on second thought, the following code should work both on the Front and the Back side of the card (you can just replace the input selector in your code with #typeans)

#typeans {
 font-family: Leelawadee !important;
 font-size: 100px !important;
 text-align: center !important;
}

[ibjoe]

jcznk,
Thank you! This fixed the final problem!