Font-Your-Face-Default

Default @fontyourface snippet. Typically, for custom fonts, I'll add in a new folder called "fonts" in the root directory. Then within that file, create a new CSS file called "fonts.css". This file is where you add this little piece of magic.

Make sure you have the various required font types (opentype,woff,ttf,svg,eot,etc.) and they are included within the fonts folder you created.

NOTE: Replace "NAME-WHATEVER-YOU-WANT" with the name of your font as it is referenced in the fonts folder.

To make the font "work", add this:

<link rel="stylesheet" type="text/css" href="fonts/fonts.css">

on your index.html page. Make sure to paste in in after your main CSS stylesheet. For example, the way the markup will look on the index.html page would be like this:

<link rel="stylesheet" type="text/css" href="css/global.css">
<link rel="stylesheet" type="text/css" href="fonts/fonts.css">

Where "global.css" is the main CSS stylesheet which defines the styling of your page.
(Typically the main CSS stylesheet would be called "styles.css". This is the default naming convention for popular CMS applications such as Wordpress. Many designers typically use this naming convention for the main CSS stylesheet as well.)