Commits

thejeshgn  committed 42e88e1

added actual lines needed for fonts to emdbed

  • Participants
  • Parent commits e6e8a42

Comments (0)

Files changed (3)

File gubbi/index.htm

 	
 		<div id="installing">
 			<div class="section">
-				<div class="grid7 firstcol">
+					<div class="grid7 firstcol">
 					<h1>Installing Webfonts</h1>
-					
-					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
-					
-					<h2>1. Upload your webfonts</h2>
-					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
-					
-					<h2>2. Include the webfont stylesheet</h2>
-					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+					<h2>1.Add the font defnition style sheet</h2>
+					To use this font on your site. Include the following style sheet in your head section of your html
+<code>
+&lt;link href='http://thejeshgn.bitbucket.org/gubbi/gubbi-font.css' rel='stylesheet' type='text/css'&gt;
+</code>
+It defines a new font family called <code> 'GubbiNormal'</code>. Now you can use that font in your style sheet.
+					<h2>2. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'GubbiNormal' }</code>
 
-
-<code>
-@font-face{ 
-	font-family: 'MyWebFont';
-	src: url('WebFont.eot');
-	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
-	     url('WebFont.woff') format('woff'),
-	     url('WebFont.ttf') format('truetype'),
-	     url('WebFont.svg#webfont') format('svg');
-}
-</code>
-
-	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
-	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
-
-					<h2>3. Modify your own stylesheet</h2>
-					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
-<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
-
-<h2>4. Test</h2>
+<h2>3. Test</h2>
 <p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
 				</div>
 				
 	
 	</div>
 	<div id="footer">
-		<p>Projects: <a href="http://code.thejeshgn.com/kn-web-fonts">Kannada web Fonts</a>&nbsp;|&nbsp;<a href="https://github.com/aravindavk/Gubbi">ಗುಬ್ಬಿ</a>&nbsp;|&nbsp;<a href="http://thejeshgn.com">Thejesh GN</a></p>
+		<p>Projects: <a href="http://thejeshgn.bitbucket.org/">Kannada web Fonts</a>&nbsp;|&nbsp;<a href="https://github.com/aravindavk/Gubbi">ಗುಬ್ಬಿ</a>&nbsp;|&nbsp;<a href="http://thejeshgn.com">Thejesh GN</a></p>
 	</div>
 </div>
 </body>
 		</div>
 
 		<div id="fonts">
-			The following fonts are available as of now for embedding.
-			<ol>
-			<li><a href="./gubbi/index.htm">Gubbi</a>
-			<li><a href="./navilu/index.htm">Navilu</a>
-			</ol>
+			<p>The following fonts are available as of now for embedding.</p><br><br>
+			<ul>
+			<li><h1>1. <a href="./gubbi/index.htm">Gubbi</a></h1>
+			<li><h1>2. <a href="./navilu/index.htm">Navilu</a></h1>
+			</ul>
 		</div>
 		
 
 	</div>
 	<div id="footer">
-		<p>Projects: <a href="http://code.thejeshgn.com/kn-web-fonts">Kannada web Fonts</a>&nbsp;|&nbsp;<a href="http://thejeshgn.com">Thejesh GN</a></p>
+		<p>Projects: <a href="http://thejeshgn.bitbucket.org/">Kannada web Fonts</a>&nbsp;|&nbsp;<a href="http://thejeshgn.com">Thejesh GN</a></p>
 	</div>
 </div>
 </body>

File navilu/index.htm

 			<div class="section">
 				<div class="grid7 firstcol">
 					<h1>Installing Webfonts</h1>
-					
-					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
-					
-					<h2>1. Upload your webfonts</h2>
-					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
-					
-					<h2>2. Include the webfont stylesheet</h2>
-					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+					<h2>1.Add the font defnition style sheet</h2>
+					To use this font on your site. Include the following style sheet in your head section of your html
+<code>
+&lt;link href='http://thejeshgn.bitbucket.org/navilu/navilu-font.css' rel='stylesheet' type='text/css'&gt;
+</code>
+It defines a new font family called <code> 'NaviluNormal'</code>. Now you can use that font in your style sheet.
+					<h2>2. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'NaviluNormal' }</code>
 
-
-<code>
-@font-face{ 
-	font-family: 'MyWebFont';
-	src: url('WebFont.eot');
-	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
-	     url('WebFont.woff') format('woff'),
-	     url('WebFont.ttf') format('truetype'),
-	     url('WebFont.svg#webfont') format('svg');
-}
-</code>
-
-	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
-	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
-
-					<h2>3. Modify your own stylesheet</h2>
-					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
-<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
-
-<h2>4. Test</h2>
+<h2>3. Test</h2>
 <p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
 				</div>
 				
 	
 	</div>
 	<div id="footer">
-		<p>Projects: <a href="http://code.thejeshgn.com/kn-web-fonts">Kannada web Fonts</a>&nbsp;|&nbsp;<a href="https://github.com/aravindavk/Navilu">ನವಿಲು</a>&nbsp;|&nbsp;<a href="http://thejeshgn.com">Thejesh GN</a></p>
+		<p>Projects: <a href="http://thejeshgn.bitbucket.org/">Kannada web Fonts</a>&nbsp;|&nbsp;<a href="https://github.com/aravindavk/Navilu">ನವಿಲು</a>&nbsp;|&nbsp;<a href="http://thejeshgn.com">Thejesh GN</a></p>
 	</div>
 </div>
 </body>