How to add custom font to revolution slider?

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 18 replies, 2 voices, and was last updated 9 years by Mohammad – SUPPORT.

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

Back to forum

Posted in: Dante
February 10, 2015 at 8:00 am #148593

Rushan4eg
Member

Post count: 72

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?

February 10, 2015 at 9:15 am #148624

Mohammad – SUPPORT
Moderator

Post count: 27441

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

February 10, 2015 at 1:31 pm #148732

Rushan4eg
Member

Post count: 72

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?

February 10, 2015 at 1:48 pm #148739

Mohammad – SUPPORT
Moderator

Post count: 27441

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

February 17, 2015 at 9:57 am #150798

Rushan4eg
Member

Post count: 72

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?

February 17, 2015 at 12:21 pm #150852
Mohammad – SUPPORT
Moderator

Post count: 27441
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
February 17, 2015 at 3:08 pm #150943

Rushan4eg
Member

Post count: 72

This reply has been marked as private.

February 17, 2015 at 5:09 pm #151004
Mohammad – SUPPORT
Moderator

Post count: 27441
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
February 18, 2015 at 1:39 pm #151235

Rushan4eg
Member

Post count: 72

Thanks! Now it works!

February 18, 2015 at 1:47 pm #151240

Rushan4eg
Member

Post count: 72

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!

February 18, 2015 at 4:59 pm #151337

Mohammad – SUPPORT
Moderator

Post count: 27441

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

February 24, 2015 at 1:50 pm #152763

Rushan4eg
Member

Post count: 72

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

February 24, 2015 at 2:22 pm #152785
Mohammad – SUPPORT
Moderator

Post count: 27441
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
February 24, 2015 at 2:47 pm #152800

Rushan4eg
Member

Post count: 72

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

February 24, 2015 at 4:52 pm #152838

Mohammad – SUPPORT
Moderator

Post count: 27441

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

Posted in: Dante