Merge pull request #1616 from adobe/randy/new-code-font

implement SourceCodePro font in editor

src/htmlContent/main-view.html

@@ -109,6 +109,10 @@
                 <div class="table-container"></div>
             </div>
         </div>
+
+        <!-- Hack to ensure that the code editor's web font is loaded early. -->
+        <!-- For more info, see note in brackets.less for class .dummy-text, or issue 76 -->
+        <div class="dummy-text">x</div>
     </div>
 
     <!-- Modal Windows -->

src/styles/brackets.less

@@ -533,6 +533,23 @@ ins.jstree-icon {
     }
 }
 
+/* This text is used to force the code editor's font to be loaded early on if it's a
+   web font. This is necessary in order for the editor's horizontal measurement of text
+   to work properly.
+
+   In the future, when we allow the user to switch fonts, we'll need to make sure to
+   update the font for this text item whenever the user switches. We'll also need to
+   wait to initiate a re-measure in CodeMirror until the new font is loaded (if they
+   choose a web font). This library allows for checking if a web font is loaded:
+
+     http://code.google.com/apis/webfonts/docs/webfont_loader.html
+*/
+.dummy-text {
+    position: fixed;
+    top: -10000px;
+    .code-font();
+}
+
 /* Styles for the search dialog--this is temporary, only for debugging */
 
 .CodeMirror-dialog {

src/styles/brackets_codemirror_override.less

@@ -91,7 +91,7 @@
     }
     .CodeMirror-gutter-text {
         color: @accent-comment;
-        font-size: 0.9em;
+        /*font-size: 0.9em;*/  /* restore after SourceCodePro font fix? */
         padding-top: 0px;
         padding-bottom: 0px;
     }
@@ -130,4 +130,19 @@
     .CodeMirror-scroll {
         outline: none;
     }
-}
+}
+
+/*
+ * Temporarily override bold and italic syntax highlighting until
+ * SourceCodePro supports them in a fixed pitch
+ */
+span.cm-em {
+    font-style: normal;
+}
+span.cm-strong {
+    font-weight: normal;
+}
+span.cm-emstrong {
+    font-style: normal;
+    font-weight: normal;
+}

src/styles/brackets_fonts.less

@@ -63,6 +63,15 @@
 }
 
 
+/* SourceCodePro Regular */
+@font-face {
+    font-family: 'SourceCodePro';
+    src: url('fonts/SourceCodePro/SourceCodePro-Regular.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
 /* Font Stacks */
 
 @fontstack-sans-serif: 'SourceSans', Helvetica, Arial, sans-serif;

src/styles/brackets_theme_default.less

@@ -99,26 +99,32 @@
 
 /* Code font formatting
  *
- * NOTE: The fonts below must be system fonts (native installed fonts), not web fonts. To use a web font we'd need to
- * jump through some additional hoops (and we couldn't easily vary the font by OS like we do now). See earlier versions
- * of this file for details.
+ * NOTE (JRB): At this time, the font-family must be set in .code-font (not in one of the platform-specific versions).
+ * This is because, in order to get the web font to load early enough, we have a div called "dummy-text" that
+ * is styled with .code-font().
+ *
+ * The platform-specific selector gets added to the body tag at document ready time, so it may not happen soon
+ * enough to get the web font loaded. So, we can't rely on this selector to load web fonts in a platform-specific way
+ *
+ * An alternative (if we wanted platform-specific fonts) would be to have a dummy text div for EVERY web font, and
+ * then style those dummy text divs directly in brackets_fonts.less. However, this would result in us downloading
+ * all fonts for every platform. This probably isn't a huge performance problem, but isn't necessary at this time.
  */
 .code-font() {
     color: @content-color;
     // line-height must be specified in px not em because the code font and line number font sizes are different.
     // Sizing via em will cause the code and line numbers to misalign
     line-height: 15px;
+    font-family: 'SourceCodePro', monospace;
 }
 
 .code-font-win() {
     .code-font();
-    font-family: Consolas, "Lucida Console", "Courier New", monospace;
-    font-size: 13px;    /* TODO: ideally, we want 12px for Lucida & Courier */
+    font-size: 13px;    /* < > chars look horrible at 12px  */
 }
 
 .code-font-mac() {
     .code-font();
-    font-family: Menlo, Monaco, monospace;
     font-size: 12px;
 }