@font-face font family rendering as Times New Roman

[shartsworth]

Hello I was wondering if anyone would be able to solve my issue, or at least guide me in the right direction.

I am attempting to change the rendered markdown font (I'm using the body tag for example as it changes all of the text on the rendered markdown).

Here is my userstyle.css:

/* css for rendered markdown */

@font-face{

    font-family: 'agave-regular';

    src: url('fonts/agavefont/dist/Agave-Regular.ttf');

    font-style: normal;

    font-weight: normal;

}

:root {

    --font-example: 'agave-regular';

}

body{

    font-family: var(--font-example) !important;

}

Here is Joplin:

My issue is that whenever I try to change the font to a new one (using the @font face rule) the text ends up appearing as Times New Roman. My path to the font seems to be correct as well as the var back to the root as well so I'm confused as to why the text is appearing as Times New Roman?

[tessus]

Next time, please do not make a screenshot of text (your userstyle.css). Makes it really hard to copy and paste, you know.

Try to remove the comma before !important (line 15).

[shartsworth]

Lol, I'm new to this so thx!

How would I be able to upload it as text to be easy to copy/paste?

Thx

Also removed the comma and didn't make a difference. Still times new roman

[tessus]

@shartsworth

How would I be able to upload it as text to be easy to copy/paste?

You copy your contents of the userstyle.css in an editor. Then you paste it here in a code block.

Example:

body, th, td, p.inline-code {
	font-size: var(--font-size);
}

@shartsworth

Also removed the comma and didn't make a difference. Still times new roman

My CSS skills suck. But there are a lot of people in this forum who are CSS gurus: @uxamanda @dpoulton

[shartsworth]

Thanks for the reply, I'll send them a message.

[tessus]

No need to send a message. They should have received a notification since I mentioed them.

What you can do is look at the following topics:

Share your CSS

I would be curious if anyone would care to share their userstyle.css snippets and perhaps a screenshot?

and

Joplin Customization

This page is a collection of CSS tweaks to customize Joplin (e.g. editor, rendering, ...) To discover CSS classes and types refer to this comment Plain editor (no color, no font changes) userchrome.css Joplin version tested on: 1.1.4 div.CodeMirror-lines * { font-size: inherit !important; color: black !important; font-weight: normal !important; text-decoration: none !important; } Example [plain_codemirror] /ref dpoulton comment Dark Theme Mermaid Flowchart (Flowchart only) users…

[dpoulton]

@shartsworth

@font-face{
    font-family: 'agave-regular';
    src: url('fonts/agavefont/dist/Agave-Regular.ttf');
    font-style: normal;
    font-weight: normal;
}

Is there any particular reason you are using @font-face?

I have never used this before (my css tinkering has only ever been with Joplin css). However from examples I have seen this is a method of defining a webfont on a website. The font would normally be .woff or .woff2 and the url would be a relative path on the site leading to where the woff font file is located on the webserver.

Is Agave-Regular.ttf actually installed on your system? I ask as that would make things a lot easier ...

[shartsworth]

Yes, agave is installed on my system. Double checked that too.

What I'm after is using @font-face within the Neptune theme by @hrqmonteiro to be able to link the variable selectors within : root. I was going about it using @font-face to be able to have the font be available with/without internet connection. And to be able to add a path back to the original font-family that I determine the name of (by using @font-face).

Here is userstyle.css from the Neptune theme:

The way the : root selector is linked (say to the variable --font-sans within body for example) you can see how you'd be able to add in a font to be able to use that selector. That is what I am after with @font face.

/* html-ized markdown */
/* designed originally by uxamanda (https://discourse.joplinapp.org/u/uxamanda). latest version https://github.com/amandamcg/joplin-theme */
/* Redesigned by Stephen (robotcorner) https://https://github.com/robotcorner/joplin-theme-dark-gruvbox */

:root {
    --white: #E5FFDE;
    --dark-white: #CEE5C7;
    --light-grey: #44475A;
    --grey: #040010;
    --dark-grey: #040010;
    --darker-grey: #040010;
    --black: #050017;
    --red: #FF1744;
    --red-dark: #FF1744;
    --green: #23CD60;
    --green-dark: #23CD60;
    --yellow: #E7AE1D;
    --yellow-dark: #E7AE1D;
    --blue: #02A4F1;
    --blue-dark: #02A4F1;
    --purple: #F459F4;
    --purple-dark: #F459F4;
    --aqua: #00F8F8;
    --aqua-dark: #00F8F8;
    --orange: #E7AE1D;
    --orange-dark: #E7AE1D;
    --base-size-1: 1px;
    --base-size-4: 5px;
    --base-size-8: 9px;
    --base-size-11: 11px;
    --base-size-12: 12px;
    --base-size-13: 13px;
    --base-size-14: 14px;
    --base-size-15: 15px;
    --base-size-16: 16px;
    --base-size-17: 17px;
    --base-size-18: 18px;
    --base-size-18: 19px;
    --base-size-24: 24px;
    --base-size-32: 32px;
    --base-size-40: 40px;
    --base-size-272: 272px;
    --z-toc: 99;
    --font-weight-light: 300;
    --font-weight-base: 550;
    --font-weight-base-extra: 550;
    --font-weight-bold: 600;
    --font-title: "GoogleSans Nerd Font";
    --font-sans: "GoogleSans Nerd Font"; /*Montserrat or Corbel*/
    --font-mono: "RobotoMono Nerd Font";
    --primary: var(--yellow);
    --secondary: var(--yellow);
    --font-line-height: 1.4em;
    --font-size: var(--base-size-17);
    --icon-size: var(--font-size);
}

.yellow {
    color: var(--yellow) !important;
    font-family: var(--font-title);
    font-weight: var(--font-weight-light) !important;
    letter-spacing: 0.01em;
    margin-top: var(--base-size-24);
}

.blue {
    color: var(--blue) !important;
    font-family: var(--font-title);
    font-weight: var(--font-weight-light) !important;
    letter-spacing: 0.01em;
    margin-top: var(--base-size-24);
}

.purple {
    color: var(--purple) !important;
    font-family: var(--font-title);
    font-weight: var(--font-weight-light) !important;
    letter-spacing: 0.01em;
    margin-top: var(--base-size-24);
}

.red {
    color: var(--red) !important;
    font-family: var(--font-title);
    font-weight: var(--font-weight-light) !important;
    letter-spacing: 0.01em;
    margin-top: var(--base-size-24);
}

.hljs {
    background-color: black;
    padding: var(--base-size-18);
    border-radius: var(--base-size-4) !important;
}

#rendered-md {
    font-family: var(--font-sans) !important;
    padding: 3%;
}

body {
    font-family: var(--font-sans) !important;
    font-weight: var(--font-weight-base) !important;
    color: var(--dark-white);
    background-color: var(--grey);
    font-size: var(--font-size);
}

p, h1, h2, h3, h4, h5, h6, ul, table {
    margin-top: 0;
}

h1, h2, h3, h4 {
    color: var(--white) !important;
    font-family: var(--font-title);
    font-weight: var(--font-weight-light) !important;
    letter-spacing: 0.01em;
    margin-top: var(--base-size-24);
}

h1 {
    font-size: calc(var(--font-size)*2) !important;
    line-height: var(--font-line-height) !important;
    margin-top: var(--base-size-40) !important;
    border-bottom: none !important;
    font-weight: bold !important;
}

h1:first-child {
    margin-top: 0px !important;
}

h2 {
    font-size: calc(var(--font-size)*1.6) !important;
    font-weight: bold !important;
}

h3 {
    font-size: calc(var(--font-size)*1.4) !important;
    font-weight: bold !important;
}

h4 {
    font-size: calc(var(--font-size)*1.3) !important;
    font-weight: bold !important;
}

p, li {
    /* font-weight: var(--font-weight-base) !important; */
    letter-spacing: .03em;
    color: var(--dark-white);
    margin-bottom: var(--base-size-24);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

ol li, ul li {
    margin-bottom: var(--base-size-4);
}

ul ul {
    /* list-style-type: cjk-heavenly-stem; */
    list-style-type: disc;
}

hr {
    padding: var(--base-size-11) !important;
}

blockquote {
    color: var(--white) !important;
    font-style: regular !important; 
    opacity: 1;
    padding-right: 8px;
    border-radius: 8px !important;
    border-left: 6px solid var(--green);
    background-color: var(--light-grey);
}

blockquote strong {
    font-style: bold !important; 
    color: var(--green) !important;
}

blockquote em {
    font-style: italic !important; 
    color: var(--blue) !important;
}

li.md-checkbox [type="checkbox"]:not(:checked),
li.md-checkbox [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
    margin-left: -32px !important;
}

li.md-checkbox [type="checkbox"]:not(:checked) + label,
li.md-checkbox [type="checkbox"]:checked + label {
    position: relative;
    padding-left: 1.5em;
    cursor: pointer;
    margin-left: -32px !important;
}

/* checkbox aspect */
li.md-checkbox [type="checkbox"]:not(:checked) + label:before,
li.md-checkbox [type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0; top: -3px;
    width: 1em; height: 1em;
    border: 1px solid var(--black);
    background: var(--black);
    border-radius: 1px;
}

/* checked mark aspect */
li.md-checkbox [type="checkbox"]:not(:checked) + label:after,
li.md-checkbox [type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    left: 0; top: -3px;
    width: 1em; height: 1em;
    border: 1px solid var(--black);
    background: var(--black);
    border-radius: 1px;
    transition: all .2s;
}

/* checked mark aspect changes */
li.md-checkbox [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}

li.md-checkbox [type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}

a, summary {
    text-decoration: none !important;
    padding: 0 0 var(--base-size-4) 0 !important;
    color: var(--secondary) !important;
    font-weight: var(--font-weight-bold) !important;
}

a:hover {
    border-bottom: var(--base-size-1) dashed var(--secondary) !important;
}

a[data-resource-id] {
    color: var(--dark-green) !important;
    /* change the colour of INTERNAL links */
    /* https://discourse.joplinapp.org/t/share-your-css/1730/65 */
}

a[data-resource-id] :hover {
    border-bottom: var(--base-size-1) dashed var(--primary) !important;
}

/* joplin icon in joplin link */
.resource-icon {
    background-color: var(--primary) !important;
    width: 0.75em;
    height: 0.9em;
    top: 0.1em;
}

pre {
    font-family: var(--font-mono) !important;
}

/* ```inline code``` */
.inline-code {
    font-family: var(--font-mono) !important;
    font-size: var(--base-size-12) !important;
    padding: .3em .3em !important;
    border-radius: var(--base-size-4) !important;
    background-color: var(--red) !important;
    border: none !important;
    color: var(--white) !important;
}

/* ==emphasis== */
mark {
    padding: 0 var(--base-size-4) !important;
    background-color: var(--yellow-dark);
}

nav.table-of-contents>ul {
    top: 0;
    right: 0;
    position: fixed;
    z-index: var(--z-toc);
    background: var(--dark-grey);
    padding: var(--base-size-8);
    border-radius: var(--base-size-4);
    max-width: 15%;
    font-size: calc(var(--font-size)/1.3) !important;
    max-height: var(--base-size-272);
    overflow: scroll;
    opacity: 1;
}

nav.table-of-contents ul {
    list-style-type: none;
    margin-left: var(--base-size-4);
}

nav.table-of-contents li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

nav.table-of-contents li a {
    padding: 0;
    color: var(--light-grey) !important;
}

@media all and (min-width: 920px) {
    nav.table-of-contents>ul {
        height: 100%;
        max-height: 100%;
    }

    #rendered-md {
        width: 75%;
    }
}

b-gray, b-green, b-red, b-blue, b-orange, b-pink, b-purple {
    width: 90%;
    display: block;
    margin-left: 20px; 
    padding: 10px;
    border: 1px solid;
    border-left: 5px solid;
    border-radius: 2px; 
    word-wrap: break-word;
    box-shadow: 3px 3px 7px 0 rgba(255,255,255,0.7) ;
    color: #000000;
}

b-gray {
    border-color: #b1bcc2;
    background-color: #e9edf0; 
 }

b-green {
    border-color: #5fa04e;
    background-color: #c5e5b4; 
} 


b-red {
    border-color: #f65354;
    background-color: #fad3d4; 
}

b-blue {
    border-color: #229ade;
    background-color: #bbe5fb; 
}

b-orange {
    border-color: #cf7506;
    background-color: #faf3d3; 
}


b-purple {
    border-color: #af74e8;
    background-color: #ead9fb; 
}

b-pink {
    border-color: #ed5393;
    background-color: #fad3e5; 
}
/**/

If there is an easier way to go about this I am more than open but I had figured being able to set a variable selector would save time in the long run so that's why I went about trying @font face.

[dpoulton]

I am not familiar with that theme however it looks like you would be able to use any fonts installed on your system by changing the font names in the below lines in the theme css file(s).

userstyle.css

    --font-title: "GoogleSans Nerd Font";
    --font-sans: "GoogleSans Nerd Font"; /*Montserrat or Corbel*/
    --font-mono: "RobotoMono Nerd Font";

userchrome.css

    --font-sans: "GoogleSans Nerd Font"; /*Bahnschrift */
    --font-mono: "RobotoMono Nerd Font";

However from briefly looking at the github page it seems that "nerd" fonts are specifed as they also contain special "glyphs" that give all the little icons everywhere.

You need two fonts with the FontAwesome and Material Icons glyphs, one sans-serif and one monospaced . The sans i use in all the titles and pretty much the rest of the theme, and the monospaced is used, obviously, on the markdown editor. You can get fonts patched with both glyphs (and more) using any of the Nerd Fonts, you can download any of them on the website, ...

Unless your copy of agave is the "nerd" font version downloaded from the link above (and installed) it looks like the theme will not work.

If it is the "nerd" font versions of agave and RobotoMono you have installed, try using this for the fonts in the theme css file(s)

    --font-title: "agave Nerd Font";
    --font-sans: "agave Nerd Font"; /*Montserrat or Corbel*/
    --font-mono: "RobotoMono Nerd Font";

and

    --font-sans: "agave Nerd Font"; /*Bahnschrift */
    --font-mono: "RobotoMono Nerd Font";

I have not tested this because I am not in a position to install the theme myself

Finally, I believe you got "Times New Roman" because the css could not be interpreted and so it just defaulted to the most basic browser font!

[shartsworth]

I can't explain why but it seems that the Agave font is not compatible with Joplin. I tested both the regular font and the patched nerd font version and neither worked.

However, I was able to use the Jetbrains Mono nerd font perfectly fine. Figured I'd write the solution in case anyone else has my unique problem.

Thanks for the help though.