Css font not changing correctly or aligning to the center - html

Question

I am trying to change the font-family of my tab and align the text to the center using "font-family" and "text-align" but it isn't working. Here is my code and the image. As you can see the font is not Roboto and the text "Chat" is not aligned properly.
<style>
div#olark_tab{
position: fixed;
right: 0;
bottom:50%;
z-index:5000;
}
#olark_tab div{
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
}
#olark_tab a{
/*Edit these to change the look of your tab*/
background-color: #DCDCDC;
color: #1EAFE6;
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
height: 20px;
padding: 6px;
display: block;
text-decoration: none;
text-align: center;
width: auto;
border-top-right-radius:9px;
border-top-left-radius:9px;
border-top-style: none;
border-top-width: 0;
}
#olark_tab a:hover{
background-color: white;
}
</style>
<div id="olark_tab">
<div>
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
<img src="icon-chat.svg">
Chat
</a>
</div>
</div>

Answer 1

For the font, the font-family declaration works if you try an already-included font, like Arial or Times New Roman. I don't believe Roboto is a default font that you can just include. Have you imported it from somewhere like Google Fonts?
For the text centering: I'm not entirely sure what you mean by "not aligned properly," but it is centered in your example. Both the "Chat" text and the SVG icon are part of the centered element (the <a> tag), so it's those two elements together being centered within the box. (The same distance extends from the "t" to the top and from the edge of the speech bubble to the bottom.) Depending on how you actually want it to be aligned, you may need to target the text or image and align them individually.

Answer 2

The Roboto font is not supported by css and is only available through google. I have added the code to get the font from google and display it in on the tab.
HTML
<style>
div#olark_tab{
position: fixed;
right: 0;
bottom:50%;
z-index:5000;
}
#olark_tab div{
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
}
#olark_tab a{
/*Edit these to change the look of your tab*/
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
background-color: #DCDCDC;
color: #1EAFE6;
font-family: 'Roboto', sans-serif;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
height: 20px;
padding: 6px;
display: block;
text-decoration: none;
text-align: center;
width: auto;
border-top-right-radius:9px;
border-top-left-radius:9px;
border-top-style: none;
border-top-width: 0;
}
#olark_tab a:hover{
background-color: white;
}
</style>
<div id="olark_tab">
<div>
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
<img src="icon-chat.svg">
Chat
</a>
</div>
</div>

Answer 3

make your image smaller
div#olark_tab {
position: fixed;
right: 0;
bottom: 50%;
z-index: 5000;
}
#olark_tab div {
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
}
/* changes */
#olark_tab img{
width: 50%;/* or :75%; make it the much you want */
}
/* changes */
#olark_tab a {
/*Edit these to change the look of your tab*/
background-color: #DCDCDC;
color: #1EAFE6;
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
height: 20px;
padding: 6px;
display: block;
text-decoration: none;
text-align: center;
width: auto;
border-top-right-radius: 9px;
border-top-left-radius: 9px;
border-top-style: none;
border-top-width: 0;
}
#olark_tab a:hover {
background-color: white;
}
<div id="olark_tab">
<div>
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
<img src="icon-chat.svg"> Chat
</a>
</div>
</div>