{
  "$type": "site.standard.document",
  "content": {
    "$type": "site.standard.content.markdown",
    "text": "<link\n  rel=\"preload\"\n  href=\"/fonts/RocherColorGX.woff2\"\n  as=\"font\"\n  type=\"font/woff2\"\n  crossorigin\n/>\n\nOk, so we've got our variable font in our project, and it looks cool, but it doesn't look 100%. The font style meets your expectations, but the colors....m'eh. Kind of works, but could be improved to go along with the color scheme being used. Here's our basic class `.variable-heading` that these examples are going to be worked around. Here's what it looks like.\n\n<style>\n\n  @font-palette-values --mint {\n    font-family: Rocher;\n    base-palette: 7;\n  }\n\n  @font-palette-values --monochrome {\n    font-family: Rocher;\n    base-palette: 9;\n  }\n\n  @font-palette-values --coloredTheme {\n    font-family: Rocher;\n    override-colors:\n      0 #ff5f1f,\n      1 rgba(1, 15, 10, 0.5),\n      2 #010f0a,\n      3 #010f0a;\n  }\n\n  @font-palette-values --outline {\n    font-family: Rocher;\n    override-colors:\n      0 #010f0a,\n      1 #ffffff,\n      2 #ffffff,\n      3 #ffffff;\n  }\n\n  .variable-heading {\n    font-size: 4.5rem;\n    line-height: 1;\n    font-family: 'Rocher';\n    letter-spacing: -3.5px;\n    font-variation-settings: \"SHDW\" 0, \"BVEL\" 50;\n    font-palette: --monochrome;\n  }\n\n  .variable-heading--plain {\n    font-size: 5rem;\n    font-family: 'Rocher';\n    letter-spacing: -3.5px;\n    line-height: 1;\n    margin-block-end: 40px;\n    display: block;\n  }\n\n  .variable-heading--hover:hover {\n    font-palette: --mint;\n  }\n\n  .variable-heading--override-colored {\n    font-palette: --coloredTheme;\n  }\n\n  .variable-heading--override-outline {\n    font-palette: --outline;\n  }\n\n</style>\n\n```css\n.variable-heading {\n  font-size: 6rem;\n  font-family: 'Rocher';\n  letter-spacing: -3.5px;\n  line-height: 1;\n}\n```\n\n<span class=\"variable-heading--plain\">This has no variation settings or palette change</span>\n\nThere's nothing specific to variable fonts being used here, but it gives us a good base to work on top of. Noting the description from Can I Use, the `font-palette` property has to be used alongside `@font-palette-values`, so we're going to make sure we don't leave this out.\n\nWe can define a value for `font-palette` in two ways; a font-defined palette or a user-defined palette. The font-defined palette is the default one supplied by the font - `font-palette: normal`, whereas the user-defined palette is one supplied seperately by the user in the stylesheet - `font-palette: myPalette`.\n\nOn top of our `variable-heading` class, we're going to add the `font-palette` property with a user-defined palette value of `--monochrome`. We're going to knock away the shadow and the bevel too slightly with `font-variation-settings: \"SHDW\" 0, \"BVEL\" 50` - this isn't anything to do with palette changing, it just makes it look a bit more pretty. We've got our `--monochrome` palette value, but nothing to link it too, yet. Remember `@font-palette-values`? That's where this creeps in. We'll set this at-rule (when something starts with an '@' e.g. @media) up above our `variable-heading` class, calling it `@font-palette-values --monochrome`. Into this rule we'll have to set the font-family that we set in `variable-heading`, and also a new property `base-palette`. The value of this new property is dependant on how many palettes exist in the font, we've got 11 in 'Rocher', I'm going to set this value as '9'. Let's take a look at what our font looks like now.\n\n<!-- ```diff-css\n+ @font-palette-values --monochrome {\n+   font-family: Rocher;\n+   base-palette: 9;\n+ }\n\n.variable-heading {\n  font-size: 5rem;\n  letter-spacing: -3.5px;\n+ font-variation-settings: \"SHDW\" 0, \"BVEL\" 50;\n+ font-palette: --monochrome;\n}\n``` -->\n\n<span class=\"variable-heading\">This has a palette change</span>\n\nWe can also change palette styles on interaction with the text, like this!\n\n```css\n@font-palette-values --mint {\n  font-family: Rocher;\n  base-palette: 7;\n}\n\n.variable-heading:hover {\n  font-palette: --mint;\n}\n```\n\n<span class=\"variable-heading variable-heading--hover\">This has a different palette on hover</span>\n\nI guess there's a downside to using a number to reference a color palette as we've been doing. I had wishful thinking that you could pass in a custom property to the `@font-palette-values` rule, so you could give it some kind of useful name, like this;\n\n```css\n  :root {\n    --mint-palette: 7;\n  }\n\n  @font-palette-values --mint {\n    font-family: Rocher;\n    base-palette: var(--mint-palette);\n  }\n```\n\nBut nothing, so we're stuck with the numbers, and needing a reference as to what palette numbers are what colours. Sad times.\n\n<div class=\"pull-quote pull-quote--right\">\n\nSo there's another propery we can use instead of font-palette, which is called override-colors. This gives you access to the individual colors used in each palette...\n\n</div>\n\nLet's imagine that none of the preset color palettes were what you were looking for, and you want to impose your own colors on it instead (let's face it, the mint color I tested on the hover state didn't exactly fit my super cool monochrome aesthetic). Let's see what we can do here.\n\nSo there's another propery we can use instead of `font-palette`, which is called `override-colors`. This gives you access to the individual colors used in each palette, and the ability to override those colors seperately by using the color values alongside the color number. It can be quite difficult to establish which color number is equal to a specific color on the font, so it does take a bit of guesswork to start with. There's also the added complication that each font could have a different amount of palettes, with a different amount of colors in them. Our font for this 'Rocher', has **11** palettes, with 4 colors in each.\n\n{% imagePlaceholder \"./src/assets/images/posts/color-palette-rocher.png\", \"A screenshot of a few of Rochers color palettes and their specific colors included\", \"A segment of Rocher's color palette choices.\", \"(min-width: 30em) 50vw, 50vw\" %}\n\nSo, there's 4 colors available to override on our custom palette. For the default palette, we've got; the yellow, the slightly orange tint on the letters, the border around each letter, and the shadow. Playing around with it leaves us with a custom theme, as shown below.\n\n<!-- ```diff-css\n@font-palette-values --coloredTheme {\n  font-family: Rocher;\n  override-colors:\n    0 #e63946,\n    1 #010f0a;\n}\n\n.variable-heading {\n  font-size: 5rem;\n  font-family: 'Rocher';\n  letter-spacing: -3.5px;\n  font-variation-settings: \"SHDW\" 0, \"BVEL\" 50;\n- font-palette: --monochrome;\n+ font-palette: --coloredTheme;\n}\n``` -->\n\n<span class=\"variable-heading variable-heading--override-colored\">This overrides the original palette</span>\n\nKind of fits my current color scheme, but really needs to be a bit more plain - let's be honest, the above is actually pretty unsightly. Stripping out the color from everything apart from the first color option which I'm setting as the black from my theme.\n\n<span class=\"variable-heading variable-heading--override-outline\">This overrides the original palette</span>\n\nI wished for gradients, but alas, no dice.\n\nTo sum up, these are things you need to do to control a palette;\n- use a variable font that is either a COLRv0 or a COLRv1 typeface\n- use a `@font-palette-values` at-rule to define what you want to call the palette e.g. `--coloredPalette`\n- in that, set the `font-family` and the `base-palette` number\n- if you want to override the palette, use the `override-colors` property to define different colours\n\n<div class=\"pull-quote pull-quote--left\">\n\nDespite a good bit of support, I _probably_ wouldn't be using this on a client build as I think it's got some limitations and is slightly difficult to predict.\n\n</div>\n\nAt the very least, it's an interesting experiment to play around with. Despite a good bit of support, I _probably_ wouldn't be using this on a client build as I think it's got some limitations and is slightly difficult to predict. Some things also didn't seem to work for me that works with normal fonts, like transitioning between color palette changes on hover, or passing custom properties. So it's a bit of a trade-off between expectations - you can do some fancy things with colors, but in turn you lose some pretty standard things.\n\n<small>Bet the word palette is starting to look strange now, right?</small>\n<span class=\"variable-heading blocks\">Fin.</span>",
    "version": "1.0"
  },
  "description": "Don't like some of the colors used on a variable font? Don't stand for it (...unless the options aren't provided anyway, in which case fall in line)",
  "path": "/writing/font-palette",
  "publishedAt": "2023-03-09T00:00:00.000Z",
  "site": "https://dominickjay.com",
  "tags": [
    "css"
  ],
  "textContent": "Ok, so we've got our variable font in our project, and it looks cool, but it doesn't look 100%. The font style meets your expectations, but the colors....m'eh. Kind of works, but could be improved to go along with the color scheme being used. Here's our basic class  that these examples are going to be worked around. Here's what it looks like.\n\n  @font-palette-values --mint {\n    font-family: Rocher;\n    base-palette: 7;\n  }\n\n  @font-palette-values --monochrome {\n    font-family: Rocher;\n    base-palette: 9;\n  }\n\n  @font-palette-values --coloredTheme {\n    font-family: Rocher;\n    override-colors:\n      0 #ff5f1f,\n      1 rgba(1, 15, 10, 0.5),\n      2 #010f0a,\n      3 #010f0a;\n  }\n\n  @font-palette-values --outline {\n    font-family: Rocher;\n    override-colors:\n      0 #010f0a,\n      1 #ffffff,\n      2 #ffffff,\n      3 #ffffff;\n  }\n\n  .variable-heading {\n    font-size: 4.5rem;\n    line-height: 1;\n    font-family: 'Rocher';\n    letter-spacing: -3.5px;\n    font-variation-settings: \"SHDW\" 0, \"BVEL\" 50;\n    font-palette: --monochrome;\n  }\n\n  .variable-heading--plain {\n    font-size: 5rem;\n    font-family: 'Rocher';\n    letter-spacing: -3.5px;\n    line-height: 1;\n    margin-block-end: 40px;\n    display: block;\n  }\n\n  .variable-heading--hover:hover {\n    font-palette: --mint;\n  }\n\n  .variable-heading--override-colored {\n    font-palette: --coloredTheme;\n  }\n\n  .variable-heading--override-outline {\n    font-palette: --outline;\n  }\n\nThis has no variation settings or palette change\n\nThere's nothing specific to variable fonts being used here, but it gives us a good base to work on top of. Noting the description from Can I Use, the  property has to be used alongside , so we're going to make sure we don't leave this out.\n\nWe can define a value for  in two ways; a font-defined palette or a user-defined palette. The font-defined palette is the default one supplied by the font - , whereas the user-defined palette is one supplied seperately by the user in the stylesheet - .\n\nOn top of our  class, we're going to add the  property with a user-defined palette value of . We're going to knock away the shadow and the bevel too slightly with  - this isn't anything to do with palette changing, it just makes it look a bit more pretty. We've got our  palette value, but nothing to link it too, yet. Remember ? That's where this creeps in. We'll set this at-rule (when something starts with an '@' e.g. @media) up above our  class, calling it . Into this rule we'll have to set the font-family that we set in , and also a new property . The value of this new property is dependant on how many palettes exist in the font, we've got 11 in 'Rocher', I'm going to set this value as '9'. Let's take a look at what our font looks like now.\n\nThis has a palette change\n\nWe can also change palette styles on interaction with the text, like this!\n\nThis has a different palette on hover\n\nI guess there's a downside to using a number to reference a color palette as we've been doing. I had wishful thinking that you could pass in a custom property to the  rule, so you could give it some kind of useful name, like this;\n\nBut nothing, so we're stuck with the numbers, and needing a reference as to what palette numbers are what colours. Sad times.\n\nSo there's another propery we can use instead of font-palette, which is called override-colors. This gives you access to the individual colors used in each palette...\n\nLet's imagine that none of the preset color palettes were what you were looking for, and you want to impose your own colors on it instead (let's face it, the mint color I tested on the hover state didn't exactly fit my super cool monochrome aesthetic). Let's see what we can do here.\n\nSo there's another propery we can use instead of , which is called . This gives you access to the individual colors used in each palette, and the ability to override those colors seperately by using the color values alongside the color number. It can be quite difficult to establish which color number is equal to a specific color on the font, so it does take a bit of guesswork to start with. There's also the added complication that each font could have a different amount of palettes, with a different amount of colors in them. Our font for this 'Rocher', has 11 palettes, with 4 colors in each.\n\n{% imagePlaceholder \"./src/assets/images/posts/color-palette-rocher.png\", \"A screenshot of a few of Rochers color palettes and their specific colors included\", \"A segment of Rocher's color palette choices.\", \"(min-width: 30em) 50vw, 50vw\" %}\n\nSo, there's 4 colors available to override on our custom palette. For the default palette, we've got; the yellow, the slightly orange tint on the letters, the border around each letter, and the shadow. Playing around with it leaves us with a custom theme, as shown below.\n\nThis overrides the original palette\n\nKind of fits my current color scheme, but really needs to be a bit more plain - let's be honest, the above is actually pretty unsightly. Stripping out the color from everything apart from the first color option which I'm setting as the black from my theme.\n\nThis overrides the original palette\n\nI wished for gradients, but alas, no dice.\n\nTo sum up, these are things you need to do to control a palette;\nuse a variable font that is either a COLRv0 or a COLRv1 typeface\nuse a  at-rule to define what you want to call the palette e.g. \nin that, set the  and the  number\nif you want to override the palette, use the  property to define different colours\n\nDespite a good bit of support, I probably wouldn't be using this on a client build as I think it's got some limitations and is slightly difficult to predict.\n\nAt the very least, it's an interesting experiment to play around with. Despite a good bit of support, I probably wouldn't be using this on a client build as I think it's got some limitations and is slightly difficult to predict. Some things also didn't seem to work for me that works with normal fonts, like transitioning between color palette changes on hover, or passing custom properties. So it's a bit of a trade-off between expectations - you can do some fancy things with colors, but in turn you lose some pretty standard things.\n\nBet the word palette is starting to look strange now, right?\nFin.",
  "title": "Making variable fonts fit your site theme"
}