How to use fontello fonts in your project

Danny edited this page Feb 16, 2018 · 7 revisions

back to help index

Fontello generates archive with fonts, css files and docs. Here are recommendation, how to use one in your project to show icons.

Recommended way

  1. Copy ALL files with folder structure into your project, without change. That will simplify future font updates.
  2. If you need to change @fontface params - use <your_font_name>-codes.css, and define @fontface rule in outer files. That will help to keep fontello folder intact, and will prevent mistakes on upgrade, when you overwrite content with new font version.
  1. Don't forget to setup proper mime types for font file.
  2. If you place fonts on separate domain, make sure, that server responds with proper CORS headers.
  3. In the html for your page add <i class="CLASSNAME"></i> to show the font. CLASSNAME would be something like "icon-search" for your search icon. You can look in the css file to see the names of all of your icons.

Special cases

Separate domains + no CORS headers

That's a bad situation. Try to avoid it if possible. But if you can't - embed fonts directly into CSS. See example in <your_font_name>-codes.css.






Look at problems checklist

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.