Now that our site is almost complete, I'm going to show you how to integrate custom fonts.

If you search for "fonts" in your CSS file, you'll see a few different font families that have been used, like this one:

#main-menu a span, #sub-menu a span {

    color:#FFFFFF;

    font-family:FrutigerLTStd-Light, sans;

    font-size:15px;

    height:45px;

    padding-top:10px;

    text-align:center;

    display:block;

}

All these custom fonts are available for you. Go to the code page. This file lists out all the fonts, and also gives the link to each of these font types. It's important to note that all this information is available in the form of a CSS file. This is the best way to make a custom font available throughout the application and to store it locally. You can copy this code, and place it in a file called "fonts.css" in the "common" subfolder.

If you look at the code, you'll see that it has all the variations of a particular font - and this something you'll do in a professional grade application.

@font-face {

    font-family: 'FrutigerLTStd-Light';

    src: url('fonts/FrutigerLTStd-Light.eot');

    src: url('fonts/FrutigerLTStd-Light.eot#iefix') format('embedded-opentype'),

        url('fonts/FrutigerLTStd-Light.woff') format('woff'),

        url('fonts/FrutigerLTStd-Light.ttf') format('truetype'),

        url('fonts/FrutigerLTStd-Light.svg#FrutigerLTStd-Light') format('svg');

}

We have also created some custom fonts, like this one:

.Museo-500 {

    font-family: "Museo-500";

    font-weight: normal;

    font-style: normal;

}

.Museo-300 {

    font-family: "Museo-300";

    font-weight: normal;

    font-style: normal;

}

.FrutigerLTStd-Light {

    font-family: "FrutigerLTStd-Light";

    font-weight: normal;

    font-style: normal;

}

If you go back to the main.css file, you can see that the font families are nothing but custom classes that were created. I think this is a nice way to organize your fonts, though you don't necessarily have to do it this way. You always have the choice to call a font directly from CDN.

If you go to github, you'll see a folder called "fonts" that has all the different font families. The best way to access them is to simply download them, put them in a folder called "fonts" inside the "common" subfolder, and you'll be good to go.

If you're wondering how the fonts are integrated with the main.css file, it's because of this import.

@import url('font.css');

The webpage looks like this now:

So, that's how you can integrate custom font families.