Answers.Body: <p>I found reason. In some other <code>xhtml</code> file in that ebook I specified</p>
  <pre><code>&lt;style&gt;
   body {
    font-family: Arial,sans-serif;
   }
  &lt;/style&gt;
  </code></pre>
  <p>and it took priority over all. It is not according to CSS standard as more specific class name shall take priority over general style (especially when defined in other <code>xhtml</code> file)</p>
  <p>So it seems Kindle at least for windows and android doesn't display good priority for CSS styling (and maybe other attributes too). Here is example where this issue is seen:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:epub=&quot;http://www.idpf.org/2007/ops&quot;&gt;
  &lt;head&gt;
  &lt;style&gt;
   body {
    font-family: Arial,sans-serif;
   }
   .new-font{
     font-family: Courier,sans-serif;
   }
  &lt;/style&gt;
    &lt;title&gt;simple font&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Font bug demonstration - Herer is font arial correctly&lt;/p&gt;
    &lt;p class=&quot;new-font&quot;&gt;And here shall be font courier but it's not in Kindle&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>So fix would be never use css attributes on body but maybe have some inner div...</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-07-16T17:22:26.873Z
Answers.LastActivityDate: 2024-07-16T17:22:26.873Z
Answers.UserDisplayName: Vit Bernatik
Body: <p>Kindle does not display font-style properly, and all other epub readers does.</p>
  <p>I did choose standard font:</p>
  <pre><code>.new-font{
         font-family: Courier,sans-serif;
       }
  </code></pre>
  <p>and used it normally:</p>
  <pre><code>&lt;p class=&quot;new-font&quot;&gt;And here shall be font courier but it's not in Kindle&lt;/p&gt;
  </code></pre>
  <p>But font is not displayed on Kindle. Other epub readers like Calibre works fine...
  It does on PC and Android. I have latest versions. On PC I have version 2.4.0 70904.</p>
  
Tags: <kindle><css>
Title: Kindle does not display font-style properly, and all other epub readers does
UserDisplayName: Vit Bernatik
ThreadText: # Kindle does not display font-style properly, and all other epub readers does
  
  (Asked by: username_0 on 2024-07-16)
  
  Kindle does not display font-style properly, and all other epub readers does.
  
  I did choose standard font:
  
  ```
  .new-font{
         font-family: Courier,sans-serif;
       }
  
  ```
  
  and used it normally:
  
  ```
  <p class="new-font">And here shall be font courier but it's not in Kindle</p>
  
  ```
  
  But font is not displayed on Kindle. Other epub readers like Calibre works fine...
  It does on PC and Android. I have latest versions. On PC I have version 2.4.0 70904.
  
  **Tags:** kindle, css
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2024-07-16. Score: 0 | Accepted answer
  
  I found reason. In some other `xhtml` file in that ebook I specified
  
  ```
  <style>
   body {
    font-family: Arial,sans-serif;
   }
  </style>
  
  ```
  
  and it took priority over all. It is not according to CSS standard as more specific class name shall take priority over general style (especially when defined in other `xhtml` file)
  
  So it seems Kindle at least for windows and android doesn't display good priority for CSS styling (and maybe other attributes too). Here is example where this issue is seen:
  
  ```
  <?xml version="1.0" encoding="utf-8"?>
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
  <style>
   body {
    font-family: Arial,sans-serif;
   }
   .new-font{
     font-family: Courier,sans-serif;
   }
  </style>
    <title>simple font</title>
  </head>
  <body>
    <p>Font bug demonstration - Herer is font arial correctly</p>
    <p class="new-font">And here shall be font courier but it's not in Kindle</p>
  </body>
  </html>
  
  ```
  
  So fix would be never use css attributes on body but maybe have some inner div...
  
  
  ---
  
  