From 5cb1a55c2af19dd11d588d45be3310bd483633a7 Mon Sep 17 00:00:00 2001
From: lange-lange <62757828+lange-lange@users.noreply.github.com>
Date: Wed, 20 Mar 2024 00:21:19 -0400
Subject: [PATCH] f+f
---
index.html | 36 ++++++++++++++++++++----------------
1 file changed, 20 insertions(+), 16 deletions(-)
diff --git a/index.html b/index.html
index 4a62f74..91e8277 100644
--- 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 @@
+
+
CUSTOM WEB FONTS
-Check out this page in Firefox, Chrome, and Safari.Can I Use!?
+ Before you start, open this page in Firefox, Chrome, and Safari.
+
+
HOW TO LOAD CUSTOM WEB FONTS THAT ARE LOCALLY HOSTED
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!
-
-STEPS
-- Find a custom web font file by sourcing from an indie type foundry
-- Custom Web Font > Download the webfont 'woff' files (and .css file ideally), on the foundry website.
-- If it's a TTF or OTF > then check license > if it's open-source and non-copyrighted, then use a Webfont Generator to generate a web font package.
-- Add your woff font files to a /fonts subfolder of your website project.
-- Add @font-face to your css (internally or externally).
-- or Add a fontname.css file to your /css subfolder.
-- Ensure your font names are declared in your CSS and targeted in your styles.
-- Be patient!
-
+
+ STEPS
+ - Find a custom web font file by sourcing from an indie type foundry
+ - Custom Web Font > Download the webfont 'woff' files (and .css file ideally), on the foundry website.
+ - If it's a TTF or OTF > then check license > if it's open-source and non-copyrighted, then use a Webfont Generator to generate a web font package.
+ - Add your woff font files to a /fonts subfolder of your website project.
+ - Add @font-face to your css (internally or externally).
+ - or Add a fontname.css file to your /css subfolder.
+ - Ensure your font names are declared in your CSS and targeted in your styles.
+ - Be patient!
+
Having troubles? On Desktop > Right click on this page > select 'inspect' > Select the 'element icon' > see how to integrate into your project.
-