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 -
  1. Find a custom web font file by sourcing from an indie type foundry
  2. -
  3. Custom Web Font > Download the webfont 'woff' files (and .css file ideally), on the foundry website.
  4. -
  5. 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.
  6. -
  7. Add your woff font files to a /fonts subfolder of your website project.
  8. -
  9. Add @font-face to your css (internally or externally).
  10. -
  11. or Add a fontname.css file to your /css subfolder.
  12. -
  13. Ensure your font names are declared in your CSS and targeted in your styles.
  14. -
  15. Be patient!
  16. -
+
    + STEPS +
  1. Find a custom web font file by sourcing from an indie type foundry
  2. +
  3. Custom Web Font > Download the webfont 'woff' files (and .css file ideally), on the foundry website.
  4. +
  5. 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.
  6. +
  7. Add your woff font files to a /fonts subfolder of your website project.
  8. +
  9. Add @font-face to your css (internally or externally).
  10. +
  11. or Add a fontname.css file to your /css subfolder.
  12. +
  13. Ensure your font names are declared in your CSS and targeted in your styles.
  14. +
  15. Be patient!
  16. +

Having troubles? On Desktop > Right click on this page > select 'inspect' > Select the 'element icon' > see how to integrate into your project.

+
- \ No newline at end of file