A Pen by Stan Williams.

Custom-fonts-and-text-using-CSS3.markdown

Custom fonts and text using CSS3

Custom fonts and text using CSS3.

A Pen by Stan Williams on CodePen.

License.

index.html

<div id="wrapper">
   <div class="street-machine">
      <h1 class="street">Drop Shadow</h1>
      <h3 class="machine">Cursive Text</h3>
  </div>
    <h1 class="victory">Paint Brush Text</h1>
</div>

style.css

@import url(http://fonts.googleapis.com/css?family=Mr+Dafoe);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900);
@import url(http://fonts.googleapis.com/css?family=Righteous);
@import url(http://fonts.googleapis.com/css?family=Candal);

@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);

@import url(http://fonts.googleapis.com/css?family=Monoton);

body {
  background-image:url('http://i.imgur.com/Y8X1j9H.png');
background-repeat:repeat;
 }


.street-machine {
  position: relative;
}

.street {
  position: relative;
  font-family: 'Candal', sans-serif;
  font-size: 180px;
  font-style: italic;
  -webkit-text-stroke: 0.1px #ed2121;
  color: #fff;
  text-shadow: -10px 14px 7px #00dd00;
  margin: 0;
}

.windows .street {
  -webkit-text-stroke: 4px #ed2121;
}

.street:before {
  content: '';
  position: relative;
  height: 4px;
  width: 665px;
  top: 83px;
  left: 48px;
  background: #ed2121;
  box-shadow: -8px 13px #ed2121;
}

.windows .street:before {
  left: 55px;
  width: 659px;
}

.street:after {
  content: '';
  position: relative;
  height: 4px;
  width: 639px;
  top: 109px;
  left: 36px;
  background: #ed2121;
  box-shadow: -4px 13px #ed2121;
}

.machine {
  position: relative;
;
  left: 50px;
  top: 350px;
  font-family: 'Mr Dafoe', cursive;
  font-size: 130px;
  transform:rotate(-15deg);
  -ms-transform:rotate(-15deg); /* IE 9 */
  -webkit-transform:rotate(-15deg); /* Safari and Chrome */
  color: #0000cc;
  margin: 0;
  margin-top: -160px;
  padding-left: 430px;
  text-shadow: 1px 2px 0px #cc3300;
}

.windows .machine {
  margin-top: -200px;
}

.victory {
  position: relative;
  font-family: 'Permanent Marker', cursive;
  font-variant:small-caps;
  font-size: 180px;
  -webkit-transform: skew(-15deg,-15deg);
  padding-left: 80px;
  background-image: -webkit-linear-gradient(#FF0FF8 0%,  #F9F9F7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  -webkit-filter: drop-shadow(2px 2px 20px #f008b7);
}

.victory:before {
  content: '-';
  position: relative;
  bottom: -98px;
  left: 254px;
  background-image: -webkit-linear-gradient(#F3C8F3 0%, #F3C8F3 100%);
  -webkit-background-clip: text;
  text-shadow: 70px -7px #F3C8F3;
}

.victory:after {
  content: '-';
  position: relative;
  bottom: -85px;
  left: 395px;
  background-image: -webkit-linear-gradient(#F3C8F3 0%, #F3C8F3 100%);
  -webkit-background-clip: text;
  text-shadow: 70px -5px #F3C8F3;
}

Demo:
Preview, edit, and view results of edit live in real time here: http://codepen.io/Stanssongs/pen/AIyxv