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:

enter image description here

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

        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?


The below code work for me, hope it will be useful for you:

font-family: 'samplefont';
src: url("{!URLFOR($Resource.staticResourceName, '/Path/filename.eot')}");  /* IE9*/
src: url("{!URLFOR($Resource.staticResourceName, '/Path/filename.eot?#iefix')}") format('embedded-opentype'), /* IE6-IE8 */
url("{!URLFOR($Resource.staticResourceName, '/Path/filename.woff')}") format('woff');  /* Modern browsers*/
font-weight: 400;
font-style: normal;
#content { font-family: samplefont; !important }

  • hi @sahil thanks for the answer! Usually the "path" name is same as the static resource name? Dec 13 '19 at 2:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.