How to upload fonts or icon font packages to DNN

This is a part of my short series about font icons. Here's the full series

1. Setting up icon-font pickers with search in dynamic content types
2. How to upload fonts and icon-font packages in DNN
3. Creating your own custom icon-fonts
4. The tutorial app for including custom fonts or CDN-hosted fonts in DNN Content

If you need to add fonts or font-icons to a remote DNN without direct file access, you need to upload the files - this will usually fail, because DNN will not allow you to upload files with all these extensions that you really, really need - like:

1. woff - the most common font-format nowdays
2. woff2 - a newer version, but not supported by all browsers
3. ttf - true type fonts
4. svg - a vector image of the fonts, which can also be used with icon-fonts
5. eot - an internet explorer font-format
6. json - very often included in font-packages which you create using online tools like fontello

Understanding the Scope of the Issue

You will only be affected by this problem, if you upload fonts using the DNN-File-Manager. Since there are other ways the files can be uploaded, let me give you a quick overview:

1. If the files are uploaded over your normal network using windows file explorer - no problem
2. If the files are uploaded using a module-installer as part of a DNN module - no problem
3. If the font-files are uploaded in a 2sxc-App - no problem
4. If the font-files are uploaded ina 2sxc-template package - no problem
5. If you upload the files through the DNN-file manager directly - problem
6. If you upload the files through DNN file manager with a zip to unpack - problem

So if you circumvent DNN (using the windows explorer) or if you are using any other kind of installer, you're good to go. Otherwise, it will work - and maybe show an error, maybe not (depending on the version of DNN). Here's what to do:

Adding the File Extensions

You need to go to Host > Host Settings and from there choose the Tab Other Settings and find the setting Allowable File Extensions. I usually open all collapsed sections and do a search in the browser to help find the setting - it's in different places depending on the version of DNN. Here's what it looks like on a DNN 7:

You must now add all the missing types, so copy-paste this at the end of that (check your commas):

• ,json,eot,svg,ttf,woff,woff2

Save, and now you should be good to go. 

Love from the Dynamic-Content guys,
Daniel