Specify Fonts with Stylus

Answered

Follow

Craig Welch

• April 22, 2019 19:05

Could anyone please tell me how to appropriately change the font using Stylus? I am looking for both the appropriate code and also the selection of fonts that can be chosen from.

Below is the CSS that I am using and it appears to be attaching properly because the colors change for the various elements. But, no matter what i use in font-family, there is no change.

/* global font styling */
.content {
font-family: Gotham Rounded Light !important;
color: #333333 !important;
}

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

/* link styling */
.content > .contentLink {
font-family: Roboto Mono;
color: #93935D !important;
}

1

• 

  rawbytz

  • April 23, 2019 14:18

  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;
  }

  1

  Comment actions Permalink
• 

  Craig Welch

  • April 24, 2019 13:12

  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;
  }

  1

  Comment actions Permalink

Please sign in to leave a comment.