web-fonts

Demo URL: https://lange-lange.github.io/css-custom-web-fonts/

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!

1. Find a custom web font file by sourcing from an indie type foundry https://www.are.na/type-3/sourcing-type
2. Download .zip (hopefully there is a .css file that comes with it
3. Add your fonts to a /fonts subfolder of your website project.
4. Add @font-face to your css (internally or externally).
5. Declare font-family of each font for each heading and paragraph style.
6. Try to view in all browsers (Firefox, Chrome, Safari, etc)
7. Keep patient.