Search code examples
csssvgfontswebfonts

Create Web fonts using SVG

I am fairly new to svg and webfonts, and I have some svg logos which I would like to embed in my web page (and make sure they are visible on various device types)

I have tried the icon-font-generator (https://github.com/Workshape/icon-font-generator), to create web fonts, but I am not sure if this is the right approach or should I use img tag , i.e. <img class="svg" src="../svg/Tensorflow_logo.svg">

I don't want to give fixed height and width and all logos should appear of the same size. Is web fonts the right approach, and how do I need to create webfonts maintaining the original colors of the trademark logos.

Thanks,

Solution

  • You can easily turn your SVG files into fonts using the icomoon.io .

    1.select SVG enter image description here

    2.select Color section for create color pattern

    enter image description here

    3.select and create color pattern and click Add theme button

    enter image description here

    4.select Edit icon and click on the SVG in page

    enter image description here

    5.in edit page select svg section by section and select color

    enter image description here

    • Once you have reached the desired shape, you can close the edit page

    6.click on generate font and download enter image description here