title: Embedded fonts in embedded CSS not rendering unless Response.Write is called
body: <p><strong>TL;DR:</strong> Embedded resource fonts, referenced in an embedded resource CSS file with "PerformSubstitution = true", are only loading and rendering when Response.Write("<em>anything</em>") is called in the page life cycle.  Affects all browsers tested (Firefox, Chrome, IE).</p>
  
  <hr>
  
  <p>We frequently use glyphicons in our apps, and in an effort to make them significantly easier to use and maintain, I thought I'd add a small helper control and some embedded resources into our common code library.</p>
  
  <p>I can't post full code, but the rough sample of it is below.</p>
  
  <p>The issue I'm seeing is that, when one of these custom icon controls is placed on a page, the icons don't render unless <code>Response.Write("*anything*");</code> is called at some point in the page life cycle (e.g. in page_load).  The control's content renders - there's a span with the appropriate CSS class and all that - but looking in the Resources area of the inspector, none of the fonts are loaded.  When Response.Write is called, all the icons load fine and the Resources area shows all the appropriate font files. Also, oddly enough, Chrome doesn't seem to recognize it as a span - when it works, Chrome's inspector sees it as <code>&lt;span class="whatever" id="whatever"&gt;::before&lt;/span&gt;</code>, and when it doesn't work, it sees it as <code>&lt;span class="whatever" id="whatever"&gt;&lt;/span&gt;</code>.</p>
  
  <p>Unfortunately, throwing a <code>Context.Response.Write("&amp;nbsp;");</code> in the control's render function doesn't work (as hacky as it would be).</p>
  
  <p>Any ideas?</p>
  
  <hr>
  
  <p>Glyph control.</p>
  
  <pre><code>using System;
  using System.Web.UI;
  
  namespace Company.Library.Icons
  {
      public class Glyph : System.Web.UI.Control
      {
          public GlyphNamesEnum Name { get; set; }
          public Glyph () 
          {
              Name = GlyphNamesEnum.DefaultGlyph;
          }
          protected override void Render(HtmlTextWriter writer)
          {
              writer.Write(String.Format("&lt;span class=\"{0}\" id=\"{1}\"&gt;&lt;/span&gt;",
                           Name.ToString().Replace("_", "-"), 
                           this.ClientID));
          }
      }
  }
  </code></pre>
  
  <hr>
  
  <p>Css helper control.</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.ComponentModel;
  using System.Web.UI;
  
  namespace Company.Library.Icons
  {
      public class GlyphHeader : Control
      {
          private Dictionary&lt;String, String&gt; VersionFiles = new Dictionary&lt;String, String&gt;()
          {
              {"1.2.3", "Company.Library.Icons._1_2_3.glyphicons.css"}
          };
  
          public String Version { get; set; }
  
          public GlyphHeader()
          {
              Version = "1.2.3";
          }
  
          protected override void Render(HtmlTextWriter writer)
          {
              String webresourceurl = Page.ClientScript.GetWebResourceUrl(typeof(GlyphHeader), VersionFiles[Version]);
              writer.Write(String.Format("\n&lt;link rel=\"stylesheet\" href=\"{0}\"/&gt;", webresourceurl));
          }
      }
  }
  </code></pre>
  
  <hr>
  
  <p>AssemblyInfo.cs</p>
  
  <pre><code>[assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-filetypes-regular.eot", "application/vnd.ms-fontobject")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-halflings-regular.eot", "application/vnd.ms-fontobject")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-regular.eot", "application/vnd.ms-fontobject")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-social-regular.eot", "application/vnd.ms-fontobject")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-filetypes-regular.ttf", "application/x-font-ttf")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-halflings-regular.ttf", "application/x-font-ttf")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-regular.ttf", "application/x-font-ttf")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-social-regular.ttf", "application/x-font-ttf")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-filetypes-regular.woff", "application/x-font-woff")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-halflings-regular.woff", "application/x-font-woff")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-regular.woff", "application/x-font-woff")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-social-regular.woff", "application/x-font-woff")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-filetypes-regular.woff2", "application/x-font-woff")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-halflings-regular.woff2", "application/x-font-woff")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-regular.woff2", "application/x-font-woff")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-social-regular.woff2", "application/x-font-woff")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-filetypes-regular.svg", "image/svg+xml")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-halflings-regular.svg", "image/svg+xml")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-regular.svg", "image/svg+xml")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons-social-regular.svg", "image/svg+xml")]
  [assembly: WebResource("Company.Library.Icons._1_2_3.glyphicons.css", "text/css", PerformSubstitution = true)]
  </code></pre>
  
  <hr>
  
  <p>And the CSS file is just the standard glyphicons packs, merged into 1, all the fonts at the top, and font URLs replaced with the appropriate WebResource calls.  E.g. <code>@font-face{font-family:'Glyphicons Regular';src:url('&lt;%=WebResource("Company.Library.Icons._1_2_3.glyphicons-regular.eot")%&gt;')</code>...etc</p>
  
  <hr>
  
  <p>Now for where things go a bit sideways - in the web forms app.  In the markup, I have:</p>
  
  <pre><code>&lt;!-- Normal header stuff --&gt;
  &lt;company:GlyphHeader runat="server" version="1.2.3"&gt;&lt;/company:GlyphHeader&gt;
  &lt;company:Glyph runat="server" ID="Glyph1" Name="glyphicons_glass"&gt;&lt;/company:Glyph&gt;
  &lt;!-- Normal footer stuff --&gt;
  </code></pre>
  
  <p>And in the code behind, the only difference between a working version and a non-working version is the <code>Response.Write</code> call.</p>
  
  <p>No response.write call:</p>
  
  <p><a href="https://i.stack.imgur.com/xISzl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xISzl.png" alt="enter image description here"></a></p>
  
  <p>With <code>Response.Write("&amp;nbsp;");</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/tTrSS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tTrSS.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p><strong>Edit</strong>: Tried a few more things, with no luck.  Response.Write("&nbsp;") needs to be called anywhere in the page lifecycle before Render.  Can't just be written directly into the page (i.e. adding <code>&lt;body&gt;&amp;nbsp;...</code> doesn't work, even though calling Response.Write renders identically).</p>