Steps on how to create a free CDN for a custom font:
1) Add your project to GitHub (can be just your font files, or an entire web site that includes your font).
2) Set up a Github Page for your project (can be tricky for Git noobz, was for me anyways, so read up how to do it).
3) Create a folder in the github pages branch (gh-pages) and name it myprojectnameCDN or whatever your preference is.
4) You will need to add one css file (call it after your font, i.e. myfont.css) to this folder and add your font files. I would recommend minifying your css once it is complete (so you will end up with two css files) I would recommend putting the css and font files in their own sub folders too, i.e. folder called css and folder called font or fonts.
5) Create your font-face element in your css file. Example taken from my County Fonts project:
@font-face
{
font-family: "countyiconregular";
src: url("../fonts/county-icon/countyicon-webfont.eot");
src: url("../fonts/county-icon/countyicon-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/county-icon/countyicon-webfont.woff") format("woff"), url("../fonts/county-icon/countyicon-webfont.ttf") format("truetype"), url("../fonts/county-icon/countyicon-webfont.svg#countyiconregular") format("svg");
font-weight: normal; font-style: normal;
}
N.B. Make sure the url paths are correct.
That’s basically it, just make sure your new files have been uploaded to your GitHub gh-pages branch.
You should then be able to call your css file from any html head section. Test it out to make sure it works.
The path will be something like:
githubname
.github.io/
myproject
/
myfontCDN
/css/
myfont
.min.css.
For a detailed example go check out my County Font project on Github:
https://github.com/funzeye/County
and read the ReadMe.
Its Github Page can be found at:
http://funzeye.github.io/County/
and its font CDN can be seen at
http://funzeye.github.io/County/CountyCDN/css/county-fonts.min.css