Custom stylesheets

Support
57

So this is what I did…

Open the userstyle.css
At the top of the file, insert this:

:root {
    font-size: 16px;
    --template-background-color: #000000;
    --accent-background-color: #555555;
    --font-color: #dddddd;
    --highlight-font-color: #ffffff;
    --accent-color: #e9ffd9;
    --font-family: 'open_sanslight';
    --font-bold-family: 'open_sansbold';
    --font-italic-family: 'open_sansitalic';
}
@import url(../styles/fonts.css);

I created a styles folder in the root path of the Joplin folder called “styles”
Then I created a fonts.css file

@import url(../fonts/lato/stylesheet.css);
@import url(../fonts/montserrat/stylesheet.css);
@import url(../fonts/open_sans/stylesheet.css);
font {
    font-family: var(--font-family);
    color: var(--font-color);
}

Now back into the root path of the Joplin Folder, I created a fonts folder and then setup individual folders for each font.

Inside the font folder, I have their own stylesheet.css

@font-face {
    font-family: 'montserratblack';
    src: url('montserrat-black-webfont.woff2') format('woff2'), url('montserrat-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratblack_italic';
    src: url('montserrat-blackitalic-webfont.woff2') format('woff2'), url('montserrat-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratbold';
    src: url('montserrat-bold-webfont.woff2') format('woff2'), url('montserrat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratbold_italic';
    src: url('montserrat-bolditalic-webfont.woff2') format('woff2'), url('montserrat-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratextrabold';
    src: url('montserrat-extrabold-webfont.woff2') format('woff2'), url('montserrat-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratextrabold_italic';
    src: url('montserrat-extrabolditalic-webfont.woff2') format('woff2'), url('montserrat-extrabolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratextralight';
    src: url('montserrat-extralight-webfont.woff2') format('woff2'), url('montserrat-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratextralight_italic';
    src: url('montserrat-extralightitalic-webfont.woff2') format('woff2'), url('montserrat-extralightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratitalic';
    src: url('montserrat-italic-webfont.woff2') format('woff2'), url('montserrat-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratlight_italic';
    src: url('montserrat-lightitalic-webfont.woff2') format('woff2'), url('montserrat-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratmedium';
    src: url('montserrat-medium-webfont.woff2') format('woff2'), url('montserrat-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratmedium_italic';
    src: url('montserrat-mediumitalic-webfont.woff2') format('woff2'), url('montserrat-mediumitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratregular';
    src: url('montserrat-regular-webfont.woff2') format('woff2'), url('montserrat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratsemibold';
    src: url('montserrat-semibold-webfont.woff2') format('woff2'), url('montserrat-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratsemibold_italic';
    src: url('montserrat-semibolditalic-webfont.woff2') format('woff2'), url('montserrat-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratthin';
    src: url('montserrat-thin-webfont.woff2') format('woff2'), url('montserrat-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratthin_italic';
    src: url('montserrat-thinitalic-webfont.woff2') format('woff2'), url('montserrat-thinitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

font.montserrat_black {
    font-family: 'montserratblack';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_black_italic {
    font-family: 'montserratblack_italic';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_bold {
    font-family: 'montserratbold';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_bold_italic {
    font-family: 'montserratbold_italic';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_extra_bold {
    font-family: 'montserratextrabold';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_extra_bold_italic {
    font-family: 'montserratextrabold_italic';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_extra_light {
    font-family: 'montserratextralight';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_extra_light_italic {
    font-family: 'montserratextralight_italic';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_italic {
    font-family: 'montserratitalic';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_light_italic {
    font-family: 'montserratlight_italic';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_medium {
    font-family: 'montserratmedium';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_medium_italic {
    font-family: 'montserratmedium_italic';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_regular {
    font-family: 'montserratregular';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_semibold {
    font-family: 'montserratsemibold';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_semibold_italic {
    font-family: 'montserratsemibold_italic';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_thin {
    font-family: 'montserratthin';
    font-weight: normal;
    font-style: normal;
}

font.montserrat_thin_italic {
    font-family: 'montserratthin_italic';
    font-weight: normal;
    font-style: normal;
}

To use the fonts, I simple have to do this in the Joplin app

<font class="montserrat_bold">Montserrat</font><br />
<font class="montserrat_bold_italic">Montserrat</font><br />
<font class="montserrat_semibold">Montserrat</font><br />
<font class="montserrat_semibold_italic">Montserrat</font><br />
<font class="montserrat_extra_bold">Montserrat</font><br />
<font class="montserrat_extra_bold_italic">Montserrat</font><br />
<font class="montserrat_medium">Montserrat</font><br />
<font class="montserrat_medium_italic">Montserrat</font><br />
<font class="montserrat_black">Montserrat</font><br />
<font class="montserrat_black_italic">Montserrat</font><br />
<font class="montserrat_extra_light">Montserrat</font><br />
<font class="montserrat_extra_light_italic">Montserrat</font>
<font class="open_sans">Open Sans</font><br />
<font class="open_sans_italic">Open Sans</font><br />
<font class="open_sans_bold">Open Sans</font><br />
<font class="open_sans_bold_italic">Open Sans</font><br />
<font class="open_sans_semibold">Open Sans</font><br />
<font class="open_sans_semibold_italic">Open Sans</font><br />
<font class="open_sans_extrabold">Open Sans</font><br />
<font class="open_sans_extrabold_italic">Open Sans</font><br />
1 Like