How to display some of the card in serif font?

Anki Card Design
1

I have a template and CSS.

I want to display jpsentence part in serif, but the rest in sans-serif. But jpsentence is always, on all platforms is displayed in sans-serif.

How to fix this?

<div class="wrap">
    <div class="sent-center">
        <div class="jpsentence" lang="ja">
            {{furigana:jpnExample}}
            {{^jpnExample}}
                <nokana>{{kanji:jpnExampleFurigana}}</nokana>
                {{^jpnExampleFurigana}}<b>
                    {{furigana:jpnTerm}}
                    {{^jpnTerm}}
                        <nokana>{{kanji:jpnTerm}}</nokana>
                    {{/jpnTerm}}
                </b>{{/jpnExampleFurigana}}
            {{/jpnExample}}
        </div>
    </div>
</div>

@charset "UTF-8";

:root {
--bg-primary: #fcfaf7;
--bg-secondary: #f2ede4;
--text-main: #2b2b2b;
--text-dim: #76716a;
--text-highlight: #91AD70;
--border-color: #e5dfd3;
--border-light: #d1cbc0;
--link-color: #2e4452;
--link-hover: #1a2a35;
--accent-bg: #323232;
--accent-text: #fcfaf7;
--overlay-hover: rgba(0, 0, 0, 0.03);
}

.nightMode {
--bg-primary: #1c1c1c;
--bg-secondary: #141414;
--text-main: #e8e2d6;
--text-dim: #8c8579;
--text-highlight: #A3C9A8;
--link-color: #8fb1c9;
--link-hover: #b0c9db;
--accent-bg: #e8e2d6;
--accent-text: #1c1c1c;
--overlay-hover: rgba(255, 255, 255, 0.05);
--img-filter: grayscale(100%) contrast(110%) brightness(80%);
}

@media screen and (min-width: 900px) {

b,
strong {
font-weight: 300;
}
}

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

.card {
background-color: var(--bg-primary);
color: var(--text-main);
font-family: serif;
font-size: 24px;
text-align: left;
line-height: 1.4;
margin: 0 auto;
}

.card1 {
color: inherit;
}

.card2 .jpsentence ruby rt {
opacity: 0;
}

.card2 .jpsentence:hover ruby rt {
opacity: 1;
}

@media screen and (min-width: 820px) {
.card {
background-color: var(--bg-secondary);
display: flex;
justify-content: center;
}

.wrap {
width: 800px;
padding: 0 5px 0;
background-color: var(--bg-primary);
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
min-height: 100vh;
color: var(--text-main);
}

.wrap .wrap {
width: auto;
padding: 0;
min-height: 0;
border: 0;
}
}

hr {
margin: 2px 0;
clear: both;
border: 0;
border-top: 1px solid var(--border-color);
}

a {
color: var(--link-color);
}

a:hover {
color: var(--link-hover);
}

a.hint {
text-decoration: none;
text-align: center;
display: block;
}

nokana ruby rt {
opacity: 0;
font-size: 0;
display: none;
}

notext b,
notext strong {
background-color: var(--text-main);
color: transparent;
}

header {
display: flex;
clear: both;
}

header .tags {
border-radius: 0px 0px 3px 3px;
}

header>div:not(:last-child) {
margin-right: 3px;
}

.sent-center {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column nowrap;
}

.jpsentence{
font-family: serif;
font-size: 35px;
}

.jpsentence b,
.jpsentence strong {
color: var(--text-highlight);
}

.fside .jpsentence {
display: none;
}

div.ensentence>a.hint {
color: var(--text-dim);
font-size: 14px;
display: block;
border: 1px solid var(--border-light);
border-radius: 2px;
padding: 2px 10px;
margin: 4px 0;
}

.nightMode div.ensentence>a.hint {
border-color: var(--text-dim);
}

div.ensentence>a.hint:hover {
color: var(--text-main);
background-color: var(--overlay-hover);
}

.tags {
font-family: sans-serif;
text-align: center;
display: inline-block;
background-color: var(--accent-bg);
color: var(--accent-text);
font-weight: bold;
padding: 1px 4px;
margin: 0;
cursor: pointer;
border-radius: 2px;
font-size: 12px;
line-height: 14px;
}

/* AnkiDroid replay button */

.replaybutton {
margin: 0;
margin-right: 3px;
text-decoration: none;
}

.replaybutton span {
padding: 0;
font-size: 16px;
}

.replaybutton span svg {
fill: #fffaf0;
background: #333;
border-radius: 3px;
vertical-align: top;
min-width: 16px;
min-height: 16px;
}

/* PC replay button */

a.replay-button {
top: -0.125em;
position: relative;
margin: 0;
}

a.replay-button svg {
height: 1em;
width: 1em;
}

a.replay-button svg path {
fill: #fffaf0;
}

a.replay-button svg circle {
fill: #333;
}

footer {
font-size: 16px;
text-align: center;
}

footer>a {
text-decoration: none;
}

footer>a:after {
content: "·";
color: var(--text-highlight);
display: inline-block;
width: 6px;
}

footer>a:last-child:after {
content: "";
width: 0;
}

.notes {
font-size: 12px;
text-align: center;
}

.source {
font-size: 10px;
text-align: center;
}

.vocab {
margin-top: 16px;
}

.vocab div {
display: inline-block;
}

.vocab br {
display: none;
}

.vocab ol>li:after {
content: "・";
color: var(--text-dim);
}

.vocab ol>li:last-child:after {
content: "";
}

.images img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 200px; /* Limit height */
width: auto; /* Keep aspect ratio */
height: auto; /* Keep aspect ratio */
}

.production b,
.production strong {
visibility: hidden;
color: var(--text-highlight)
}

ul,
ol {
list-style-type: none;
display: inline;
margin: 0;
padding: 0;
}

.vocab ol>li {
display: inline;
}

.jpsentence ruby rt {
user-select: none;
}
2

If your issue is with japanese writing, it is probably due to the fact that font-family: serif typically autoselects a serif font for latin scripts (based on system settings). Those usually don’t contain necessary japanese characters, so the respective text gets rendered using some other font file. You should try specifying a serif japanese font explicitly, e.g.:

font-family: 'Noto Serif JP', serif;

(or using any other suitable font available to you)

2 Likes