Formatting in Ankiweb

Anki Card Design
1

Hi all,

Is it possible to incorporate custom fonts in Ankiweb? I have a TTF file for the font ‘Menlo’ that is already working on the desktop version of Anki through CSS styling, but it isn’t coming through in Ankiweb, probably due to the custom font. Here is my styling code:

@font-face {
font-family: 'Menlo';
src: url("_Menlo.ttf");
}
html { overflow: scroll; overflow-x: hidden; }
/* CONTAINER FOR YOUR CARDS */
#kard {
    padding: 0px 0px;
    max-width: 700px; /* CHANGE CARD SIZE HERE */
    margin: 0 auto; /* CENTERS THE CARD IN THE MIDDLE OF THE WINDOW */
    word-wrap: break-word; /* BREAKS UP LONG WORKS */
}

/* APPLIES TO THE WHOLE CARD */
.card.nightMode{
    font-family: 'Menlo';
    font-size: 18px;
    text-align: center;
    color: #D7DEE9; /* FONT COLOR */
    line-height: 1.6em;
    background-color: #333B45; /* BACKGROUND COLOR */
}
/* STYLE FOR CLOZE DELETIONS */
.cloze, .cloze b, .cloze u, .cloze i { font-weight: bold; color: MediumSeaGreen !important;}

/* STYLE FOR EXTRA PORTION ON BACK OF CARD */
#extra, #extra i { font-size: 15px; color:#D7DEE9; font-style: italic; }

/* STYLE TAGS TO APPEAR WHEN HOVERING OVER TOP OF CARD */
.tags { 
    color: #A6ABB9;
    opacity: 0;
    font-size: 10px; 
    width: 100%;
    text-align: center;
    text-transform: uppercase; 
    position: fixed; 
    padding: 0; 
    top:0;  
    right: 0;}
.tags:hover { opacity: 1; position: fixed;}

/* IMAGE STYLE */
img { display: block; max-width: 100%; max-height: none; margin-left: auto; margin: 10px auto 10px auto;}
tr {font-size: 12px; }

/* COLOR ACCENTS FOR BOLD-ITALICS-UNDERLINE */
b { color: #C695C6 !important; } /* BOLD STYLE */
u { text-decoration: none; color: #5EB3B3;} /* UNDERLINE STYLE */
i  { color: IndianRed; } /* ITALICS STYLE */
a { color: LightGray !important; text-decoration: none; font-size: 10px; font-style: normal; } /* LINK STYLE */

What is looks like on desktop:

image
image1919×1032 51.8 KB

However, when I test it in Ankiweb, this is what it looks like:
image
image1919×907 14.3 KB

If, for whatever reason, it is not possible to incorporate a custom font, how can I edit my styling code so that if I open Anki in Ankiweb, it loads a different font apart from the custom font (e.g. Arial)?

Many thanks
Frosty

2

You’ve only set the font for night mode, which AnkiWeb doesn’t use.

3

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