Search code examples
cssgoogle-chromefontscross-browsermozilla

Font Gregor on Mozilla

Font Gregor is cut on Mozilla.

You can see how it looks on Chrome:

enter image description here

And on Mozilla:

enter image description here

Have some ideas how to fix that?

UPD: Here is code guys HTML` 

  <div id="headliner" class="constraint-wrapper">
       <div class="constraint-box">
             <div id="headline">

    <span>«Русская Тоскания» в 2016 году</span>
       </div>
     </div>
 </div>

Here is CSS for all:

#headliner{
width:100%;
height:140px;

.constraint-wrapper {
width:100%;
display:flex;
justify-content: center; 
.constraint-box {
    display: flex;
    width:100%;
    max-width:1200px;
    padding:15px;
}
}

And 

#headline {
word-wrap:break-word; 
font-family: 'Gregor', Arial;
font-size: 35px;
color: #9a0e2f;
white-space: nowrap;
margin-right: 15px;
margin-top: 60px;
@media (max-width: 1000px) {
    max-width:100%;
    max-height:100%;
    font-size:19px;



 }
 }  `
Solution

  • I solved the issue. Apparently, Mozilla doesnt support .otf. I went to off.site of font Gregor. To my surprise there is no any others formats, so I googled and found it on the other site and took it right from console.