I have a simple HTML demo page to try out my custom font files (a collection of SVG icons)
The HTML is rather simple, I specify the path for the font file (same directory as the HTML file)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nextgenicons</title> <style> body { font-family: sans-serif; margin: 0; padding: 10px 20px; } .preview { line-height: 2em; } .previewicon { display: inline-block; width: 32px; text-align: center; } .icon { display: inline-block; font-size: 16px; } @font-face { font-family: "nextgenicons"; src: url("nextgenicons.eot?95d1e9193d97fb68fae3bc44b221fa23?#iefix") format("embedded-opentype"), url("nextgenicons.woff2?95d1e9193d97fb68fae3bc44b221fa23") format("woff2"), url("nextgenicons.woff?95d1e9193d97fb68fae3bc44b221fa23") format("woff"), url("nextgenicons.svg?95d1e9193d97fb68fae3bc44b221fa23#nextgenicons") format("svg"); } .icon { line-height: 1; } .icon:before { font-family: nextgenicons !important; font-style: normal; font-weight: normal !important; vertical-align: top; } .icon-logo:before { content: "\f101"; } .icon-ok:before { content: "\f102"; } .icon-settings:before { content: "\f103"; } .icon-menu:before { content: "\f104"; } </style> </head> <body> <h1>nextgenicons</h1> <div class="preview"> <span class="previewicon"> <span class=" icon-logo"></span> </span> <span>logo</span> </div> <div class="preview"> <span class="previewicon"> <span class=" icon-ok"></span> </span> <span>ok</span> </div> <div class="preview"> <span class="previewicon"> <span class=" icon-settings"></span> </span> <span>settings</span> </div> <div class="preview"> <span class="previewicon"> <span class=" icon-menu"></span> </span> <span>menu</span> </div> </body> </html> The browser just displays squares in place of the actual icons:
Here's the root directory, it has both the HTML page and the font files (please note the .html is the one with the IE icon, the other one with the Chrome icon is a .svg file):
What's more interesting is that the Browser doesn't fetch the font files, at all. Here's a snapshot of the network activity upon page load:
So I guess the black squares are shown because the Browser doesn't fetch the font file, but why is so?
