Specify Fonts with Stylus

Answered

Comments

2 comments

  • Avatar
    rawbytz

    This is how I'd do it.. 

    • quoted font names with spaces.
    • added backup "generic" font families, in case your preferred font doesn't define some characters.
    • confined your "global" to just bullet names
    • added !important to Electrolize (if it still doesn't work, you probably need to install the font)
    /* bullet text font styling */
    .name .content {
      font-family: "Gotham Rounded Light", sans-serif !important;
      color: #333333 !important;
    }

    /* change the font family and/or style of the text in notes */
    .notes .content {
      font-family: Electrolize, sans-serif !important;
      font-style: italic !important;
      color: #5b5b5b !important;
    }

    /* link styling */
    a.contentLink {
      font-family: "Roboto Mono", monospace !important;
      color: #93935D !important;
    }
  • Avatar
    Michael C Welch

    Thanks a lot rawbytz. 

    For anyone else interested in the same, I have posted my CSS below as well as a link to easily load all of the free Google Fonts onto your (mac/linux) computer.

    Install all Google Web Fonts onto your local machine - https://github.com/qrpike/Web-Font-Load

    /* bullet text font styling */
    .name .content {
    font-family: "Spectral", monospace !important;
    font-weight:300 !important;
    font-style: normal !important;
    color: #333333 !important;
    }

    /* change the font family and/or style of the text in notes */
    .notes .content {
    font-family: "Spectral", monospace !important;
    font-weight:200 !important;
    font-style: italic !important;
    color: #5b5b5b !important;
    }

    /* link styling */
    a.contentLink {
    font-family: "Spectral", monospace !important;
    font-weight:200 !important;
    font-style: normal !important;
    color: #93935D !important;
    }

Please sign in to leave a comment.