f+f

lange-lange · Mar 20, 2024 · 5cb1a55 · 5cb1a55
1 parent f775a71
commit 5cb1a55
Showing 1 changed file with 20 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -28,7 +28,6 @@
 	text-align: center; 
 	margin-top: 10%;
 	line-height: 0.8;
-	margin-bottom: -5rem;
 }
 
 h2 { 
@@ -53,13 +52,12 @@
 	text-align: center; 
 	width: 70vw;
 	margin: 0 auto;
-	margin-bottom: 5%;
 	margin-top: 2rem;
 }
 
 li, summary {
 	font-family: monospace; 
-	font-size: 2rem; 
+	font-size: 1.25rem; 
 	line-height: 1.25; 
 	padding-bottom: 6px;
 	width: 70vw;
@@ -171,37 +169,43 @@
 </style>
 </head>
 
+
+
 <!-- this is how you write a comment describing your code in HTML. the body section is for all content that is visible. Keep it here! Semantic structure is just as important as syntax. -->
 <body>
 
 <h1>CUSTOM WEB FONTS</h1>
-<p>Check out this page in Firefox, Chrome, <i>and</i> Safari.<a href="https://caniuse.com/?search=%40font%20face" target="_blank"><sup>Can I Use!?</sup></a></p>
+	<p>Before you start, open this page in Firefox, Chrome, <i>and</i> Safari.</p>
+
+<div class="center">	
+	<button><a class="one" href="https://github.com/lange-lange/css-custom-web-fonts/tree/main" target="_blank">Can I Use!?</a></button>
 
+</div>
 <h2>HOW TO LOAD CUSTOM WEB FONTS THAT ARE LOCALLY HOSTED</h2>
 
 	<p>What is this? In this example, I'm using @font-face for custom web font files (woff), and declared in a 'fontname.css' file. Troubleshooting tips: Double check each font path for each individual font!
 </p>
 
-	<ol>
-<summary><b>STEPS</b></summary>
-<li>Find a custom web font file by <a href="https://www.are.na/type-3/sourcing-type" target="_blank">sourcing from an indie type foundry</a></li>
-<li>Custom Web Font > Download the webfont 'woff' files (and .css file ideally), on the foundry website.</li>
-<li>If it's a TTF or OTF > then check license > if it's open-source and non-copyrighted, then use a <a href="https://www.fontsquirrel.com/tools/webfont-generator" target="_blank"> Webfont Generator</a> to generate a web font package.</li>
-<li>Add your woff font files to a /fonts subfolder of your website project.</li>
-<li>Add <a href="https://css-tricks.com/snippets/css/using-font-face-in-css/" target="_blank">@font-face</a> to your css (internally or externally).</li>
-<li><i>or</i> Add a fontname.css file to your /css subfolder.</li>
-<li>Ensure your font names are declared in your CSS and targeted in your styles.</li>
-<li>Be patient!</li>
-	</ol>
+<ol>
+		<summary><b>STEPS</b></summary>
+		<li>Find a custom web font file by <a href="https://www.are.na/type-3/sourcing-type" target="_blank">sourcing from an indie type foundry</a></li>
+		<li>Custom Web Font > Download the webfont 'woff' files (and .css file ideally), on the foundry website.</li>
+		<li>If it's a TTF or OTF > then check license > if it's open-source and non-copyrighted, then use a <a href="https://www.fontsquirrel.com/tools/webfont-generator" target="_blank"> Webfont Generator</a> to generate a web font package.</li>
+		<li>Add your woff font files to a /fonts subfolder of your website project.</li>
+		<li>Add <a href="https://css-tricks.com/snippets/css/using-font-face-in-css/" target="_blank">@font-face</a> to your css (internally or externally).</li>
+		<li><i>or</i> Add a fontname.css file to your /css subfolder.</li>
+		<li>Ensure your font names are declared in your CSS and targeted in your styles.</li>
+		<li>Be patient!</li>
+</ol>
 
 <p>Having troubles? On Desktop > Right click on this page > select 'inspect' > Select the 'element icon' > see how to integrate into your project.</p>
 
 <div class="center">	
 	<button><a class="one" href="https://github.com/lange-lange/css-custom-web-fonts/tree/main" target="_blank">Download the Github Demo .zip</button>
 	</a>
+
 	<button><a class="two" href="https://css-tricks.com/snippets/css/using-font-face-in-css/">?! CSS Font Face Documentation</a></button>
 </div>
 
-
 </body>
 </html>