Stylizing text within a div

Question

I am trying to stylize some text within a div. If you take a look at my livelink below you will see the square I need to add the stylized text to and also below is an image I created of how I would like the stylized text to loo.

Here is the image I'm trying to duplicate using CSS and text

Here is my Livelink

Can somebody please show me how to achieve this?

CSS

.trigger {
width:200px;
height:200px;
}
.trigger.large {
width: 400px;
}
.trigger.vertical {
height: 400px;
}
.trigger.vertical * {
height: 400px;
}
.hover-img, .hover-img.hover_effect {
background-color: #FFFFFF;
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px;
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}
.trigger:hover > .hover-img {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
font-size: 14px;
color: #FFF;
}
.img1 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img1:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img2 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img2:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img3 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img3:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img4 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img4:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img5 {
background-size: 100% 100%;
background-repeat: no-repeat;
} 
.img5:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img6 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img6:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
#container {
width:960px;
margin: 0 auto;
}
.row {
display: flex;
}
.col {
display:inline-block;
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}

HTML

<div id="container">
<div class="row">
    <div class="col">
        <div class="trigger vertical">
            <div tabindex="0" class="maincontent hover-img img"></div>
      </div>
    </div>
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img3"><span  class="step">Step</span> <span class="number">1</span></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img4"></div>
        </div>
    </div>
    <!-- </div>
 <div  class="row">-->
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"></div>
        </div>
    </div>
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="trigger">
        <div tabindex="0" class="maincontent hover-img img5"></div>
    </div>
    <div class="trigger">
        <div tabindex="0" class="maincontent hover-img img6"></div>
    </div>
    <div class="trigger large">
        <div tabindex="0" class="maincontent hover-img img5"></div>
    </div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img1"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img2"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img3"></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img4"> </div>
</div>
</div>

Answer 1

If this is an unusual font you should probably stick to using an image. If a user doesn't have the font you specify in CSS its going to default to something that is ugly. YES - you can embed the font into CSS by using @font-face in CSS3. But you are going to have to limit your site to CSS3 compliant browsers, and only use TTF/OTF and WOFF fonts.