search

nazar-pc / docker-subset-font

Modifies font file to only include characters from specified CSS file
3 stars 1 forks source link

How to extract the necessary CSS? #1

Open fabswt opened 4 years ago

fabswt commented 4 years ago

Hi, Played with docker-subset-font today.

I used this for the CSS file:

.fa-address-card:before {
  content: "\f2bb"; }

And sure enough, after running the command, e.g.:

docker run --rm -v /Users/fabien/Dropbox/DEV/vhosts/clickandspeak/web/new-assets/fontawesome-pro-5.12.0-web/webfonts/fa-solid-900.woff2:/font.woff2 -v /Users/fabien/Dropbox/DEV/vhosts/clickandspeak/web/new-assets/my-fa-icons.css:/style.css nazarpc/subset-font

…then fa-solid-900.woff2 was updated and contained only the one icon mentioned in the CSS.

My question is:

How do you go about extracting the necessary CSS lines from the file?

There are 70 icons I'd like to include in the Font Awesome Pro subset and extracting them one by one from all.css is just tedious.

Also, did you consider maybe using a different file for the input and output woff2, to avoid having to copy-paste it all the time?

Thank you.

nazar-pc commented 4 years ago

My use case involved modifying existing CSS, so I didn't consider extracting any lines.

In general there is a rather simple code in subset.php file that you can modify or use as an inspiration to solve your own unique use case. It basically uses regular expression to identify used unicode characters and uses glyphIgo CLI tool with generated input to process a font file. woff2_decompress and woff2_compress tools are used for transformations to and from TTF font file format.