# Anki Input Font Problem

**URL:** <https://forums.ankiweb.net/t/anki-input-font-problem/29168>\
**Category:** Card Design\
**Created:** [April 8, 2023, 7:30am UTC](https://forums.ankiweb.net/t/anki-input-font-problem/29168 "2023-04-08T07:30:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ibjoe](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@ibjoe](https://forums.ankiweb.net/u/ibjoe)\
**Post date:** [April 8, 2023, 7:30am UTC](https://forums.ankiweb.net/t/anki-input-font-problem/29168/1 "2023-04-08T07:30:04Z")

</div>

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:

 ![Preview](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/5/57f59e4be582adea3b4a7876cbfbd84f9b4d7c6a.jpeg)

Screenshot Study:

 ![Study](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/2/222c6bb65aca9f5a1d5416f1edf7d3c3482cb853.jpeg)

---

<div class="post-metadata">

**Author:** ![jojo55](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/jojo55/32/13703_2.png) [@jojo55](https://forums.ankiweb.net/u/jojo55)\
**Post date:** [April 9, 2023, 1:44am UTC](https://forums.ankiweb.net/t/anki-input-font-problem/29168/2 "2023-04-09T01:44:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ibjoe](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@ibjoe](https://forums.ankiweb.net/u/ibjoe)\
**Post date:** [April 9, 2023, 4:14am UTC](https://forums.ankiweb.net/t/anki-input-font-problem/29168/3 "2023-04-09T04:14:58Z")

</div>

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](https://www.w3schools.com/css/css_important.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

explains it well

---

<div class="post-metadata">

**Author:** ![ibjoe](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@ibjoe](https://forums.ankiweb.net/u/ibjoe)\
**Post date:** [April 9, 2023, 8:20am UTC](https://forums.ankiweb.net/t/anki-input-font-problem/29168/4 "2023-04-09T08:20:52Z")

</div>

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  
 ![FrontTemplate](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/5/5bebe1d16ca2d79a8b833751d357485399e8bc9d.jpeg)

Back Template is  
 ![BackTemplate](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/e/eab008e5a74f456692233a91ae73079fd6bde9e9.jpeg)

Front side example (OK now):

 ![FrontOK](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/6/6c77a4f8d3e08c2ea5dd6aca49aa792d007597b0.jpeg)

Back side examples:  
#1 (correct answer):

 ![FontSizeChange](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/b/b8996bcec62fcbfe62e655f908dc7524b125d832.jpeg)  
#2 (incorrect answer):  
 ![FontSizeChange2](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/8/89c49d8e256bd0697846f37b3bf9ee7520a329f0.jpeg)

Any ideas how to fix this?

---

<div class="post-metadata">

**Author:** ![jcznk](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/jcznk/32/15215_2.png) [@jcznk](https://forums.ankiweb.net/u/jcznk)\
**Post date:** [April 9, 2023, 8:55pm UTC](https://forums.ankiweb.net/t/anki-input-font-problem/29168/5 "2023-04-09T20:55:26Z")

</div>

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

```auto
#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:

```auto
<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`)

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

```

---

<div class="post-metadata">

**Author:** ![ibjoe](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@ibjoe](https://forums.ankiweb.net/u/ibjoe)\
**Post date:** [April 10, 2023, 3:59am UTC](https://forums.ankiweb.net/t/anki-input-font-problem/29168/6 "2023-04-10T03:59:09Z")

</div>

jcznk,  
Thank you! This fixed the final problem!  
😀

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 10, 2023, 3:59am UTC](https://forums.ankiweb.net/t/anki-input-font-problem/29168/7 "2023-05-10T03:59:14Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.