I have built a visual flow and embedded it in a Visualforce page, then hosted in a force site.
We also have our own custom font which we would like to display on the flow. However, it doesn't work, the final result looks more like a Times New Roman rather than our font.
The font is zipped and uploaded into a static resource:



Then I called the font in the VF page, CSS section, making sure the filename is correct:
 

@font-face {
        font-family: 'EF Circular';
        src: url("{!URLFOR($Resource.efcircular, '/efcircular/EFCircularTT-Light.ttf')}");
        font-weight: 400;
        font-style: normal;
    }

And then I added the font name in the CSS wherever it should apply:
 

html { 
       <!--background: url('{!$Resource.TKTbg}') no-repeat center center fixed;-->
       font-family: 'EF Circular';            
       background-color: #0d426c;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
       height: 100%;
       overflow: hidden;
     }

    .flow {
        font-family: 'EF Circular'; 
        width: 700px;
        height: auto;
        max-height: 100%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.9;
        overflow: auto;
        -webkit-box-shadow: 5px 5px 16px -6px rgba(0,0,0,0.77); 
        box-shadow: 5px 5px 16px -6px rgba(0,0,0,0.77);
    }

    input {         
        /*height: 9px !important;*/
        font-family: 'EF Circular';
        padding: 6px 6px !important;
        margin-bottom: 5px;
        /*display: block !important; */
        font-size: 12px !important;
        line-height: 16px !important;
        color: #191919 !important;
        background-color: #efefef !important;
        border: 1px solid #009ee8 !important;
        border-radius: 4px  !important;
        width: 9cm;
  }

Is there anything I might be doing wrong?