Skip to content

Instantly share code, notes, and snippets.

@mark05e

mark05e/custom_font_icon_extraction_steps.md

Last active November 15, 2024 14:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mark05e/706fbe6da38c40bbf308229e42a88bc3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mark05e/706fbe6da38c40bbf308229e42a88bc3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mark05e revised this gist Nov 15, 2024. 1 changed file with 7 additions and 30 deletions.
    37 changes: 7 additions & 30 deletions custom_font_icon_extraction_steps.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,51 +1,36 @@

    ## **Extracting Custom Font Icons: A Step-by-Step Guide**
    # **Extracting Custom Font Icons: A Step-by-Step Guide**

    ## **Summary**

    This guide outlines the process of extracting custom font icons from a font file (`EV-IVR--Script-Studio`) using FontForge. With the assistance of Meta AI, we successfully extracted the required icons in SVG format.

    ## **Steps Taken**

    ## Step 1: Inspect Element and Identify Font Family
    ### Step 1: Inspect Element and Identify Font Family

    - Inspected the HTML element containing the icon using browser developer tools.


    - Identified the custom font family (`EV-IVR--Script-Studio`) used for the icon.


    ## Step 2: Extract CSS Styles and Font Files
    ### Step 2: Extract CSS Styles and Font Files

    - Copied CSS styles related to the font family.


    - Downloaded font files (`EV-IVR--Script-Studio.woff2`, `EV-IVR--Script-Studio.ttf`, etc.).


    ## Step 3: Download and Install FontForge
    ### Step 3: Download and Install FontForge

    - Downloaded FontForge, a free and open-source font editing software.


    - Installed FontForge on local machine.


    ## Step 4: Open Font File and Identify Icons
    ### Step 4: Open Font File and Identify Icons

    - Opened the font file (`EV-IVR--Script-Studio`) in FontForge.


    - Identified the required icons in the glyph table.


    ## Step 5: Export Icons to SVG
    ### Step 5: Export Icons to SVG

    - Used FontForge's scripting feature to export glyphs to SVG.


    - Executed the following script:


    FF

    @@ -54,27 +39,19 @@ SelectWorthOutputting(); Export("C:/Temp/engage-icons/%n-%e.svg"); endloop;
    ```

    - Exported icons as SVG files.



    ## Step 6: Convert SVG to PNG
    ### Step 6: Convert SVG to PNG

    - Uploaded SVG files to [PineTools' Bulk SVG Converter & Viewer](https://pinetools.com/bulk-batch-svg-converter-viewer).


    - Downloaded PNG versions of the icons.


    ## **Credit**

    Special thanks to:

    - Meta AI for providing guidance and support throughout this process.


    - FontForge for providing a powerful font editing software.


    - PineTools for offering a convenient bulk SVG conversion tool.

    ## **Resources**
  2. mark05e revised this gist Nov 15, 2024. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion custom_font_icon_extraction_steps.md
    View file
    Original file line number Diff line number Diff line change
    @@ -50,7 +50,7 @@ This guide outlines the process of extracting custom font icons from a font file
    FF

    ```
    SelectWorthOutputting(); Export("/C:/Temp/engage-icons/%n-%e.svg"); endloop;
    SelectWorthOutputting(); Export("C:/Temp/engage-icons/%n-%e.svg"); endloop;
    ```

    - Exported icons as SVG files.
  3. mark05e renamed this gist Nov 15, 2024. 1 changed file with 0 additions and 0 deletions.
    0 fontforge-export-svg.md → custom_font_icon_extraction_steps.md
    View file
    File renamed without changes.
  4. mark05e created this gist Nov 15, 2024.
    84 changes: 84 additions & 0 deletions fontforge-export-svg.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@

    ## **Extracting Custom Font Icons: A Step-by-Step Guide**

    ## **Summary**

    This guide outlines the process of extracting custom font icons from a font file (`EV-IVR--Script-Studio`) using FontForge. With the assistance of Meta AI, we successfully extracted the required icons in SVG format.

    ## **Steps Taken**

    ## Step 1: Inspect Element and Identify Font Family

    - Inspected the HTML element containing the icon using browser developer tools.


    - Identified the custom font family (`EV-IVR--Script-Studio`) used for the icon.


    ## Step 2: Extract CSS Styles and Font Files

    - Copied CSS styles related to the font family.


    - Downloaded font files (`EV-IVR--Script-Studio.woff2`, `EV-IVR--Script-Studio.ttf`, etc.).


    ## Step 3: Download and Install FontForge

    - Downloaded FontForge, a free and open-source font editing software.


    - Installed FontForge on local machine.


    ## Step 4: Open Font File and Identify Icons

    - Opened the font file (`EV-IVR--Script-Studio`) in FontForge.


    - Identified the required icons in the glyph table.


    ## Step 5: Export Icons to SVG

    - Used FontForge's scripting feature to export glyphs to SVG.


    - Executed the following script:


    FF

    ```
    SelectWorthOutputting(); Export("/C:/Temp/engage-icons/%n-%e.svg"); endloop;
    ```

    - Exported icons as SVG files.



    ## Step 6: Convert SVG to PNG

    - Uploaded SVG files to [PineTools' Bulk SVG Converter & Viewer](https://pinetools.com/bulk-batch-svg-converter-viewer).


    - Downloaded PNG versions of the icons.


    ## **Credit**

    Special thanks to:

    - Meta AI for providing guidance and support throughout this process.


    - FontForge for providing a powerful font editing software.


    - PineTools for offering a convenient bulk SVG conversion tool.

    ## **Resources**

    - FontForge: [https://fontforge.org/](https://fontforge.org/)
    - Stack Overflow: https://stackoverflow.com/questions/47902878/fontforge-export-a-glyph-to-svg-with-fontforge-command-line
    - PineTools' Bulk SVG Converter & Viewer: https://pinetools.com/bulk-batch-svg-converter-viewer