How To Use Custom Fonts On Your Website With CSS

(i)You can download the font ( Example:PT-Sans.ttf ) , and Create the Font Folder and place the Font in Folder
(ii)Go to the CSS Style Sheet and Write blow content
@font-face {
    font-family: 'PT Sans Caption';
    src:
         url('fonts/PTC55F.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}
h1 {
    font-family: 'PTC55F', arial, helvetica, serif; font-weight: normal; color: #c73331;
    }

This way you can use as many custom fonts as you feel like on your website.

Social Media icons Animation (Slide Rollover)

CSS

.icon {

               height: 32px;

               width: 32px;

               margin: 8px;

               float: left;

              -webkit-transition: all ease 0.3s;

              -moz-transition: all ease 0.3s;

              -o-transition: all ease 0.3s;

              -ms-transition: all ease 0.3s;

               transition: all ease 0.3s;

}

.icon:hover {

               background-position: 0px -32px;

               box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);

}

.fb-hover {

                background-image:url(image.png);

}

.twitter-hover {

                background-image:url(image.png);

}

.linkedin-hover {

                background-image:url(image.png);

}

.googlep-hover {

                background-image:url(image.png);

}

HTML

                <div class="fb-hover icon"></div>

                <div class="twitter-hover icon"></div>

        <div class="linkedin-hover icon"></div>

        <div class="googlep-hover icon"></div>

Demo