How to add custom font to revolution slider?

[Rushan4eg]

Hello!
I have a problem with Fonts in Revolution Slider.
I would like to add my custom font “MuseoCyr”, so what i did to add:
1. I took .otf file of font and used font convertor to get another formats of Font (.eot, .ttf, .swg, .svg)
2. I load fonts in to the FTP server to adress:

3. Then i added
`@font-face {
font-family: ‘MuseoCyrl-300’;
src: url(‘http://www.maruad.ru/www/wp-content/themes/dante/css/font/MuseoCyr/MuseoCyrl.eot’);
src: url(‘http://www.maruad.ru/www/wp-content/themes/dante/css/font/MuseoCyr/MuseoCyrl.eot?#iefix’) format(’embedded-opentype’),
url(‘http://www.maruad.ru/www/wp-content/themes/dante/css/font/MuseoCyr/MuseoCyrl.woff2’) format(‘woff2’),
url(‘http://www.maruad.ru/www/wp-content/themes/dante/css/font/MuseoCyr/MuseoCyrl.woff’) format(‘woff’),
url(‘http://www.maruad.ru/www/wp-content/themes/dante/css/font/MuseoCyr/MuseoCyrl.ttf’) format(‘truetype’),
url(‘http://www.maruad.ru/www/wp-content/themes/dante/css/font/MuseoCyr/MuseoCyrl.svg#MuseoCyrl’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
to the custom css in THEME OPTIONS
4. I added the same code to the slider’s custom css/jss form

5. I wrote in font styles of layer my custom font

6. But it doesn’t displayed correctly and i see this in html editor:

Maybe my font converted uncorrectly?

[Mohammad – SUPPORT]

Hi,
I am sure that your fonts are not converted properly. You should have correct format fonts to work perfectly.
Thanks
Mohammad

[Rushan4eg]

But If I have only .otf font file, which works correctly in Photoshop and etc. how can i use on website, if convertor working not properly? Can i make it only with .otf file?

[Mohammad – SUPPORT]

Hi,
You should have correct woff font type to work with website. I dont know that how to create woff font type.
Thanks
Mohammad

[Rushan4eg]

Mohammad, thanks. I just tried to add font again.
I downloaded 100% correct woof font type of another forn, but it doesn’t works too.
Can you help me solve this ussie?

[Mohammad – SUPPORT]

Hi,
You fonts path url are wrong.

Your current path that gives not found error :-
http://www.maruad.ru/www/wp-content/themes/dante/css/font/Proxima nova/proximanova-reg-webfont.woff

New correct path. I removed <strong>/www</strong>:-
http://www.maruad.ru/wp-content/themes/dante/css/font/Proxima nova/proximanova-reg-webfont.woff

You need to change the path of all fonts files in css and remove font face loading css from revolution slider. Hope everything should work.

Thanks
Mohammad

[Rushan4eg]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please add this code at end of .htacccess file.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Thanks
Mohammad

[Rushan4eg]

Thanks! Now it works!

[Rushan4eg]

Also one, maybe you know how to use custom font only on 1 page? or only on 3-4 pages?

It will be great if you tell me.

Thanks!

[Mohammad – SUPPORT]

Hi,
For page content or full page including menus, footer etc?
Thanks
Mohammad

[Rushan4eg]

For a full content of page. Like a font style of all <p> on a one page.
For example: i want to use mycustom fint Coolvetica on a Contact page only.
Thx

[Mohammad – SUPPORT]

Hi,
Please use the custom css code like this.
/*please replace the 123 with your contact page id*/

.page-id-123 .inner-page-wrap p{
font-family:'Font_Name' !important;
}

Thanks
Mohammad

[Rushan4eg]

Thanks! But where i can find page-id? 🙂
I see only page URL and name…

[Mohammad – SUPPORT]

Hi,
Please edit page in admin, here you will find an ID at url.
Thanks
Mohammad