MediaWiki:Mobile.less/fonts.less

From Old School RuneScape Wiki
Jump to: navigation, search
// <pre>
/* ==================
        variables
   ================== */

@system-font-stack: system-ui, -apple-system, Roboto, Helvetica, sans-serif;
@header-color: @river-bed;

/* ==========================
       from Google Fonts
   ========================== */

// <https://fonts.google.com/specimen/PT+Serif>
@import (css) url('https://fonts.googleapis.com/css?family=PT+Serif:400,400i,600,600i&display=swap');

/* ==================
          body
   ================== */

// use system font instead of Lato for faster load times
body {
    font-family: @system-font-stack;
    
    // default is too small
    @media all and (max-width: 320px) {
        font-size: .9em;
    }

}

#mw-content-text {
    line-height: 1.7em;
}

@font-face {
    font-family: 'runescape_bold_12';
    font-style: normal;
    font-weight: normal;
    src: local("RuneScape Bold"),
         local("RuneScape Bold 12"),
         local("RuneScape Chat 2"),
         local("RuneScape Chat"),
         url('filepath://RuneScape_Bold_12.woff') format('woff');
}

@font-face {
    font-family: 'runescape_plain_12';
    font-style: normal;
    font-weight: normal;
    src: local("RuneScape Plain 12"),
         url('filepath://RuneScape_Plain_12.woff') format('woff');
}

/* ==================
        headers
   ================== */

.pre-content h1, // page title
.content h1,
.content h2 {
    color: @header-color;
    font-weight: bold;
    font-family: @serif-stack;
}

h3,
h4,
h5,
h6 {
    color: @header-color;
    font-family: @system-font-stack;
}