function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SARI4SARI4 

Custom Font is not working Visualforce page

I want Effra Font in my Visualforce page:
I am using below code and it is NOT WORKING
Stored a ZIP file in Static resource EFfraFont. In ZIP file path is like this   Effra_Web_Apps >>>> Webfonts >>> EOT>>>>Effra_W_lt.eot
 
 @font-face {
            font-family:Effrafont;
           src: url("{!URLFOR($Resource.EffraFont, '/Effra_Web_Apps/Webfonts/EOT/Effra_W_lt.eot')}"); 
            src: url("{!URLFOR($Resource.EffraFont, '/Effra_Web_Apps/Webfonts/EOT/Effra_W_lt.eot?#iefix')}") format('embedded-opentype'),
                 url("{!URLFOR($Resource.EffraFont, '/Effra_Web_Apps/Webfonts/WOFF2/Effra_W_lt.woff2')}") format('woff2'),
                 url("{!URLFOR($Resource.EffraFont, '/Effra_Web_Apps/Webfonts/WOFF/Effra_W_lt.woff')}") format('woff'),
                 url("{!URLFOR($Resource.EffraFont, '/Effra_Web_Apps/Webfonts/TTF/Effra_W_lt.ttf')}") format('truetype'),
                 url("{!URLFOR($Resource.EffraFont, '/Effra_Web_Apps/Webfonts/SVG/Effra_W_lt.svg#_scriptregular')}") format('svg');    
        }
.header {           
        font-family:Effrafont; !important
        
        }
Deepali KulshresthaDeepali Kulshrestha
Hi SARI4,

First of all Please recheck your path.
Because Sometime it would be a minor mistake are there.

If all is fine then It may be due to "The custom font will only work if you are working and applied the CSS in this staging site: https://mitral-valve-help-3.patientevolution.com/1".

You cannot just simply use it in the custom CSS because it might get overridden or outputted last on the page. This is the order of the styles being applied to the page. 
- Theme's stack style.css
- Child Theme's style.css
- WP Customizer's Additional CSS
- Theme Option settings
- Theme Options Custom CSS
- Cornerstone/Pro editor's custom CSS

I would highly recommend that you place that CSS code in the child theme's style.css file. At least it should be loaded first before any of your other custom CSS.

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha