The font Nabla has two variable axes that you can fiddle with on Google fonts. The fact that there are many variable colors that can be changed is not apparent as demonstrated on Typearture.
As of Nov 2023 this only works on the latest version of Chrome! There’s a tool made by Roel Nieskens gives a lot of information about a font called Wakamai Fondue. You can dump that font there and see the in-built color palettes.
You can customize your own palette with some magic CSS that is not fully supported yet. Here’s an example:
@import url('https://fonts.googleapis.com/css2?family=Nabla&display=swap');
h1 {
text-align: center;
font-family: 'Nabla';
font-size: 10em;
margin: 0;
}
@font-palette-values --custom-palette {
font-family: Nabla;
override-colors:
0 rgb(86, 86, 86),
/* thin outer highlight color */
1 rgb(136, 78, 139),
/* depth left bottom gradient */
2 rgb(0, 255, 255),
/* not sure what this changes */
3 rgb(201, 97, 148),
/* depth left top gradient */
4 rgb(255, 114, 108),
/* depth shadow inner gradient */
5 rgb(255, 134, 150),
/* depth shadow base gradient */
6 rgb(255, 139, 0),
/* face bottom gradient */
7 rgb(255, 176, 0),
/* face top gradient */
8 rgb(255, 127, 207),
/* depth top base gradient */
9 rgb(255, 224, 124);
/* highlight color */
}
.custom {
font-palette: --custom-palette;
}<h1>DEFAULT</h1>
<h1 class="custom">CUSTOM</h1>I want to create an SVG logo using these custom types and palette. If there is some kind of tool or way to do this out there, please let me know.
2
Answers
You can create an SVG which internally references the font and applies the CSS. The only tool you need is a text editor. Even great SVG editors like Boxy SVG don’t support custom font palettes.
Firefox print option "save-to-pdf" seems to add some sort of flattened vector/path layer for colored Open type SVG.
Tested in Firefox 119.0.1 (64-bit) Windows 10.
open HTML in firefox
Print page CTRL+P: select "save to PDF"
open pdf in inkscape: select "draw all text" – converts all text to path elements
Save as svg
Output SVG