particle icon indicating copy to clipboard operation
particle copied to clipboard

Can't find way to alter font-sizes

Open dibs opened this issue 5 years ago • 1 comments

Sorry for posting here but I don't know where else to seek help.

I am trying a way to set my font-sizes in my particle patterns. The _type.scss file seem to ignore size. I don't have printing and non-printing folders either so the docs are bit odd to follow.

Also is there a forum anywhere for particle?

dibs avatar Feb 12 '20 03:02 dibs

Hope you've solved your issue. For those who have the same problem in the future, I'd like to provide some instructions.

Fonts/type related stuff are under particle/source/default/tokens. Follow the steps:

  1. Place your fonts under particle/source/default/tokens/fonts directory.
  2. Open the particle/source/default/tokens/sass/tokens.scss file where you'll see an example:
// Example: local fonts
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(../../fonts/Oswald-Medium.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Edit this to suit your needs. I've got five variations of two fonts.

After that, if you're using Bootstrap, head to particle/source/default/tokens/sass/libraries/bootstrap/_utils.scss and edit // Bootstrap font family overrides to make sure that Bootstrap uses your fonts. I'm not limited to those three options, in particle/source/default/tokens/sass/utils/_variables.scss, I've setup other font family variables for different font weights.

For the font sizes: Assuming you use Bootstrap, you'll need to override default variables in the same way. Check the list of bootstrap's variables, and edit them like you did for font families (more info on this could be found on Bootstrap documentation).

eih avatar Apr 30 '20 08:04 eih