cssfontsgoogle-fontsvariable-fontsopentype-svg-font

Is it possible to extract an SVG from a rendered Truetype Font?

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.

Google Font licence FAQ

Solution

  • 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.

    1. open HTML in firefox print FF

    2. Print page CTRL+P: select "save to PDF"

    3. open pdf in inkscape: select "draw all text" - converts all text to path elements
      inkscape

    4. Save as svg

    Output SVG

    <svg version="1.1" viewBox="0 0 795 1123" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <linearGradient id="linearGradient74" x2="30.2" y1="44.4" y2="96.5" gradientTransform="matrix(.667 0 0 -.667 111 473)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#c96194" offset="0"/>
   <stop stop-color="#ff8696" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient76" x2="12.5" y1="220" y2="241" gradientTransform="matrix(.667 0 0 -.667 111 473)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#c96194" offset="0"/>
   <stop stop-color="#884e8b" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient80" x2="107" y1="20.4" y2="205" gradientTransform="matrix(.667 0 0 -.667 111 473)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#884e8b" offset="0"/>
   <stop stop-color="#c96194" offset=".563"/>
   <stop stop-color="#ff7fcf" offset=".757"/>
   <stop stop-color="#ff7fcf" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient82" x2="-62.2" y1="-24" y2="84.2" gradientTransform="matrix(.667 0 0 -.667 111 473)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#ff8b00" offset="0"/>
   <stop stop-color="#ffb000" offset="1"/>
  </linearGradient>
 </defs>
 <g>
  <path d="m145 354 34.6-20c3.62-2.12 6.85-2.38 9.67-.781 2.83 1.59 4.25 4.52 4.25 8.78v16l-13.9 8v-16l-34.6 20v92.8l34.6-20v-16l13.9-8v16c0 2.77-.668 5.76-2 8.95-1.34 3.2-3.04 6.16-5.12 8.88-2.09 2.72-4.35 4.78-6.8 6.17l-34.6 20c-3.73 2.12-6.98 2.38-9.77.781-2.77-1.59-4.16-4.52-4.16-8.78v-92.8c0-2.88.641-5.88 1.92-9.03 1.28-3.14 2.99-6.08 5.12-8.8 2.13-2.72 4.43-4.77 6.88-6.17zm48.5 64.8-13.9 8-13.9-8 13.9-8zm-13.9 8v16l-13.9-8v-16zm0 16-34.6 20-13.9-8 34.6-20zm0-92.8v16l-13.9-8v-16zm9.77-16.8c-2.89-1.59-6.14-1.33-9.77.797l-34.6 20c-2.45 1.4-4.74 3.45-6.88 6.17-2.14 2.72-3.84 5.65-5.12 8.8-1.28 3.15-1.92 6.16-1.92 9.03v92.8c0 4.26 1.38 7.19 4.16 8.8l-13.9-8c-2.78-1.6-4.17-4.54-4.17-8.8v-92.8c0-2.88.641-5.88 1.92-9.03 1.28-3.14 2.99-6.08 5.12-8.8 2.13-2.72 4.43-4.77 6.88-6.17l34.6-20c3.73-2.12 6.98-2.39 9.77-.797z" fill="#565656" aria-label="C"/>
  <path d="m194 419-13.9 8-13.9-8 13.9-8z" fill="#ff8696" />
  <path d="m180 427v16l-13.9-8v-16z" fill="#c96194" />
  <path d="m180 443-34.6 20-13.9-8 34.6-20z" fill="url(#linearGradient74)" />
  <path d="m180 350v16l-13.9-8v-16z" fill="url(#linearGradient76)" />
  <path d="m190 333c-2.89-1.59-6.14-1.33-9.77.797l-34.6 20c-2.45 1.4-4.74 3.45-6.88 6.17-2.14 2.72-3.84 5.65-5.12 8.8-1.28 3.15-1.92 6.16-1.92 9.03v92.8c0 4.26 1.38 7.19 4.16 8.8l-13.9-8c-2.78-1.6-4.17-4.54-4.17-8.8v-92.8c0-2.88.641-5.88 1.92-9.03 1.28-3.14 2.99-6.08 5.12-8.8 2.13-2.72 4.43-4.77 6.88-6.17l34.6-20c3.73-2.12 6.98-2.39 9.77-.797z" fill="url(#linearGradient80)" />
  <path d="m145 354 34.6-20c3.62-2.12 6.85-2.38 9.67-.781 2.83 1.59 4.25 4.52 4.25 8.78v16l-13.9 8v-16l-34.6 20v92.8l34.6-20v-16l13.9-8v16c0 2.77-.668 5.76-2 8.95-1.34 3.2-3.04 6.16-5.12 8.88-2.09 2.72-4.35 4.78-6.8 6.17l-34.6 20c-3.73 2.12-6.98 2.38-9.77.781-2.77-1.59-4.16-4.52-4.16-8.78v-92.8c0-2.88.641-5.88 1.92-9.03 1.28-3.14 2.99-6.08 5.12-8.8 2.13-2.72 4.43-4.77 6.88-6.17z" fill="url(#linearGradient82)" />
  <path d="m180 334c-6.09 3.21-11.2 5.96-15.5 8.25-4.21 2.29-7.89 4.32-11 6.08-3.15 1.76-6.16 3.5-9.03 5.2-2.46 1.39-4.73 3.44-6.81 6.16-2.07 2.72-3.75 5.65-5.03 8.8-1.28 3.15-1.92 6.16-1.92 9.05v18.7c0 6.5.0508 14 .156 22.6.102 8.59.316 19 .641 31.1.32-11.8.535-22 .641-30.4.102-8.43.156-15.9.156-22.4v-18.7c0-2.88.641-5.88 1.92-9.03 1.28-3.16 2.99-6.09 5.12-8.81 2.13-2.72 4.43-4.77 6.88-6.16 2.88-1.71 5.88-3.47 8.97-5.28s6.61-3.91 10.5-6.31c3.95-2.41 8.7-5.37 14.2-8.89zm0 92.8c-.43 3.73-.668 6.74-.719 9.03-.0547 2.29-.0781 4.45-.0781 6.48-2.89 1.71-5.88 3.47-8.97 5.28s-6.64 3.92-10.6 6.33c-4 2.4-8.72 5.36-14.2 8.88 5.98-3.21 11.1-5.96 15.3-8.25 4.21-2.29 7.88-4.32 11-6.08 3.16-1.76 6.17-3.49 9.05-5.2 0-2.02-.0274-4.2-.0781-6.55-.0547-2.35-.293-5.66-.719-9.92z" fill="#ffe07c" />
 </g>
</svg>

    However, OpenType SVG features such as COLRv1 should be treated with caution: they are currently (2024) not widely supported in desktop (graphic or office) applications and still introduce many challenges for PDF generators.