html - CSS help for blogger comments widget -

i've changed css font on blogger comments widget, it's still stuck on arial pages. i've made sure install respective google api font in template, seems apply comments on regular posts. how regular post comments like: http://thereadinggrotto.blogspot.sg/2014/06/first-post.html?showcomment=1403768355383#c2121347278617355835

this how comments on pages: http://thereadinggrotto.blogspot.sg/p/about-mermaid.html?showcomment=1403769230075

here's css comments in blog template:

/* ============================= comment ============================= */ .comments .comments-content {   font:normal 13px cabin, sans-serif;   text-align:left;   line-height:1.4em;   margin-bottom:16px;   color:#305e58; } .comments .comments-content .user {   font:cabin, sans-serif;   font-style:normal;   font-weight:normal;   text-transform:uppercase;   color:#305e58; } .comments .comments-content .datetime {   margin-left:10px;   font:normal 11px cabin, sans-serif;   color:#305e58; } .comment-replies{   background:#d3ebe1;   box-shadow:inset 0 0 0 1px #d3ebe1;   border-radius:3px; } .comments .comment .comment-actions {   background:#edf7f2;   color:#8ba69b;   padding:2px 5px;   margin-right:10px;   font:10px cabin, sans-serif;   border-radius:3px;   -moz-border-radius:3px;   -webkit-border-radius:3px;   transition:.2s linear;   -moz-transition:.2s linear;   -webkit-transition:.2s linear; } .comments .comment .comment-actions a:hover {   background:#d6f1ec;   text-decoration:none;   transition:.2s linear;   -moz-transition:.2s linear;   -webkit-transition:.2s linear; } .comments .avatar-image-container {   border-radius:3px; }   .comments .thread-toggle {   color:#8ba69b; } .comments .thread-toggle a:hover {   padding-left:10px;   color:#305e58;   text-decoration:none; } .comments .thread-toggle a:hover, .comments .thread-toggle {   transition:.2s linear;   -moz-transition:.2s linear;   -webkit-transition:.2s linear; } #comments h4 {   margin:1em 0;   line-height:1.4em;   letter-spacing:0em;   color:#305e58;   text-transform:uppercase;   font:normal 20px yanone kaffeesatz; } #comments-block {   margin:1em 0 1.5em;   line-height:1.6em; } #comments-block .comment-author {   margin:.5em 0; } #comments-block .comment-body {   margin:.25em 0 0; } #comments-block .comment-footer {   margin:-.25em 0 2em;   line-height: 1.4em;   text-transform:uppercase;   letter-spacing:.1em; } #comments-block .comment-body p {   margin:0 0 .75em; } .deleted-comment {   font-style:italic;   color:#8ba69b; } 

help appreciated, thank you!

add font family comments-block below.

 #comments-block {  margin:1em 0 1.5em;  line-height:1.6em;  font:normal 13px cabin, sans-serif;  } 

if won't work apply classes under comments-block below.

 #comments-block .comment-author {   margin:.5em 0;   font:normal 13px cabin, sans-serif;   }  #comments-block .comment-body {   margin:.25em 0 0;   font:normal 13px cabin, sans-serif;  }  #comments-block .comment-footer {  margin:-.25em 0 2em;  line-height: 1.4em;  text-transform:uppercase;  letter-spacing:.1em;  font:normal 13px cabin, sans-serif; } #comments-block .comment-body p {  margin:0 0 .75em;  font:normal 13px cabin, sans-serif; }