Font SVG extraction

Community Wiki
1

Sites sometimes use fonts for more efficient delivery of icons and glyphs and to make it harder to extract and copy images. Here’s how to take advantage of that for SVG edits, using https://en.leonie-pur.com/ as an example

  1. Identifying fonts as glyphs

If inspecing an element on a page, instead of image source, you encounter content: "\e927" ^1 but it still renders as an image on your screen, that’s a font glyph. After you have confirmed it is a font and there are no SVG equivalents made available, it’s time to identify the font. Some common ones are pureicons, *icons. If you follow the css rule where the content is declared, you will usually find blocks of text similar to the first one you found ^2. At the top of the file, you’ll be looking specifically for CSS declarations for @font-face and font-family ^3. Once we’ve identified the font (pureicons), we can head to the network tab and filter for the filename, or navigate to it manualy

  1. Glyph Identification
    After getting the file, it’s time to identify which glyph is used. FontDrop gies more information, while OpenType.js is not as buggy with the UI. We’ve identified E921 as the character/glyph we want to extract.

  2. Glyph Extraction
    with FontForge, we can follow this guide (archive) to extract all the glyphs as SVGs.

Abridged version of guide:

  1. Open the font file
  2. Create a folder to house all the SVGs (there will be a lot)
  3. Select Execute Script from FontForge FIle menu
  4. Select FF instead of python and add the script, then click OK
SelectAll()
UnlinkReference()
Export("/full/path/to/svg/%n-%e.svg")

If you are on windows, it is important to use the forward slash (/), not the backslash (\) that windows defaults to, this will result in your svgs being dumped at the root of the drive

Appendix

1: Logo as a font character instead of image

.icon-LPCMS_Mainbrand:before {
  content: "\e927";
}

2: SCSS example of font glyphs
_icons.scss

.icon-lpcsm-payment_kk:before {
  content: "\e902";
}
.icon-lpcsm-payment_ls:before {
  content: "\e903";
}
.icon-lpcsm-payment_sf:before {
  content: "\e904";
}
.icon-lpcsm-payment_ps:before {
  content: "\e905";
}
.icon-lpcsm-payment_pp:before {
  content: "\e906";
}

3: font-family declaration and font-family usage

@font-face {
  font-family: 'puricons';
  src:  url(fonts/puricons.eot);
  ...
}
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  src: url(fonts/material-symbols.woff2) format('woff2');
}
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  ...
}
.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'puricons' !important;
  ...
}
2 Likes