font-face in css to use large collection to attractive cool fonts. Download open type or true type fonts and use is it in your website.
code :
<style>
@font-face {
font-family:'Di';
src:url('fonts/Di.woff') format('woff');
src:url('fonts/Di.ttf') format('truetype'),
('fonts/Di.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'Action';
src:url('fonts/Action.ttf') format('truetype');
src:url('fonts/Action.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'amadeus';
src:url('fonts/amadeus/amadeus.woff') format('woff');
src:url('fonts/amadeus/amadeus.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'anagram';
src:url('fonts/anagram/anagram.woff') format('woff');
src:url('fonts/anagram/anagram.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'alphaecho';
src:url('fonts/alphaecho/alphaecho.woff') format('woff');
src:url('fonts/alphaecho/alphaecho.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'alusine';
src:url('fonts/alusine/alusine.woff') format('woff');
src:url('fonts/alusine/alusine.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'alfa-slab';
src:url('fonts/alfa-slab/alfa-slab.woff') format('woff');
src:url('fonts/alfa-slab/alfa-slab.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'after-shock';
src:url('fonts/after-shock/after-shock.woff') format('woff');
src:url('fonts/after-shock/after-shock.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'alex-brush';
src:url('fonts/alex-brush/alex-brush.woff') format('woff');
src:url('fonts/alex-brush/alex-brush.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'burnstown_dam';
src:url('fonts/burnstown_dam/burnstown_dam.woff') format('woff');
src:url('fonts/burnstown_dam/burnstown_dam.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'bigfish';
src:url('fonts/bigfish/bigfish.woff') format('woff');
src:url('fonts/bigfish/bigfish.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: League-Gothic;
src: url("fonts/League-Gothic.otf") format("opentype");
}
@font-face {
font-family: Museo;
src: url("fonts/Museo300-Regular.otf") format("opentype");
}
h4 {
font-family:'Action';
font-size:22px;
}
h5 {
font-family:'Di';
font-size:22px;
}
h4.amadeus{
font-family:'amadeus';
font-size:26px;
}
h4.anagram{
font-family:'anagram';
font-size:26px;
}
h4.alphaecho{
font-family:'alphaecho';
font-size:40px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
h4.alusine{
font-family:'alusine';
font-size:26px;
}
h4.alfa-slab{
font-family:'alfa-slab';
font-size:26px;
}
h4.after-shock{
font-family:'after-shock';
font-size:26px;
color:black;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h4.alex-brush{
font-family:'alex-brush';
font-size:30px;
}
h4.burnstown_dam{
font-family:'burnstown_dam';
font-size:44px;
color:orange;
}
h4.bigfish{
font-family:'bigfish';
font-size:30px;
}
h2.shdow
{
text-shadow:
1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444; /* end of 4 level deep dark shadow */
font-family:'Myriad Pro', Verdana, Arial, Helvetica, sans-serif; font-size:50px; color:#98F5FF; letter-spacing:5px; text-align:center; line-height:110px;
-webkit-transition: all 0.12s ease-out;
/* Safari & Chrome */
-moz-transition: all 0.12s ease-out;
/* Firefox */
-o-transition: all 0.12s ease-out;
/* Opera */
}
h2.shdow:hover {
/* Scaling Effect */
-webkit-transform: scale(1.1); /* Safari & Chrome */
-moz-transform: scale(1.1);
/* Firefox */
-o-transform: scale(1.1);
/* Opera */
}
#neon {
padding: 10px;
}
#neon h1 {
text-align: center;
margin: 50px auto;
font-family: "Museo";
font-size: 80px; text-transform: uppercase;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
#inset {
padding: 10px; background: #474747;
}
#inset h1 {
text-align: center;
margin: 50px auto;
font-family: "League-Gothic", Courier;
font-size: 80px; text-transform: uppercase;
color: #222;
text-shadow: 0px 2px 3px #666;
}
button.blue-pill {
background-color: #a5b8da;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5b8da), color-stop(100%, #7089b3));
background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
background-image: linear-gradient(top, #a5b8da, #7089b3);
border-top: 1px solid #758fba;
border-right: 1px solid #6c84ab;
border-bottom: 1px solid #5c6f91;
border-left: 1px solid #6c84ab;
border-radius: 18px;
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
box-shadow: inset 0 1px 0 0 #aec3e5;
color: #fff;
font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 8px 0;
text-align: center;
text-shadow: 0 -1px 1px #64799e;
text-transform: uppercase;
width: 350px; }
button.blue-pill:hover {
background-color: #9badcc;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9badcc), color-stop(100%, #687fa6));
background-image: -webkit-linear-gradient(top, #9badcc, #687fa6);
background-image: -moz-linear-gradient(top, #9badcc, #687fa6);
background-image: -ms-linear-gradient(top, #9badcc, #687fa6);
background-image: -o-linear-gradient(top, #9badcc, #687fa6);
background-image: linear-gradient(top, #9badcc, #687fa6);
border-top: 1px solid #6d86ad;
border-right: 1px solid #647a9e;
border-bottom: 1px solid #546685;
border-left: 1px solid #647a9e;
-webkit-box-shadow: inset 0 1px 0 0 #a5b9d9;
box-shadow: inset 0 1px 0 0 #a5b9d9;
cursor: pointer; }
button.blue-pill:active {
border: 1px solid #546685;
-webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; }
</style>
</head>
<body>
<h5>1.THis is to Action font -Techie Touch </h5>
<h4>2.THis it Di Fonts -Techie Touch </h4>
<h4 class="amadeus">3.THis it amadeus Fonts -Techie Touch </h4>
<h4 class="anagram">4.THis it Anagram Fonts -Techie Touch </h4>
<h4 class="alphaecho">5.THis it Aalphaecho Fonts -Techie Touch </h4>
<h4 class="alfa-slab">7.THis it Alfa-slab Fonts -Techie Touch </h4>
<h4 class="after-shock">8.THis it Aafter-shock Fonts -Techie Touch </h4>
<h4 class="alex-brush">9.THis it Aalex-brush Fonts -Techie Touch </h4>
<h4 class="burnstown_dam">10.THis it burnstown_dam Fonts -Techie Touch </h4>
<h4 class="bigfish">11.THis it A bigfish Fonts -Techie Touch </h4>
<h2 class="shdow">12.3D CSS Shadow Text -Techie Touch </h4>
<div id="neon">
<h1>13.Neon -Techie Touch</h1>
</div>
<div id="inset">
<h1>14.Inset Techie Touch</h1>
</div><br>
<button class="blue-pill"><h4 class="alphaecho">Place An Order</h4></button>
Those who does not want to install Our mobile app use our new CGPA calculator which is Updated and mobile optimized.
.png)
