Adding CSS Webfont to Fullscreen Slider

lapinpub's picture
lapinpub
Sat, 08/08/2015 - 23:21
#1
Adding CSS Webfont to Fullscreen Slider

I am using a custom webfont using the following CSS

@font-face {
    font-family: 'Conv_signika-regular';
    src: url('../fonts/signika-regular.eot');
    src: local('☺'), url('../fonts/signika-regular.woff') format('woff'), url('../fonts/signika-regular.ttf') format('truetype'), url('../fonts/signika-regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.signika { font-family:'Conv_signika-regular',Sans-Serif;    } 

This allows me to use the font "signika" hosted on my website.  With the code above it works just fine for stylable template elements (I've tested it on my site with your theme) but I'd also like to use that font in the MD Slider.

How would I go about doing that? 

phuonght's picture
phuonght
Mon, 08/10/2015 - 06:52

Hi,

We will check and reply ASAP :)

phuonght's picture
phuonght
Tue, 08/11/2015 - 06:16

Lapinpub,

In our MD Slider and MD Fullscreen Slider, we all have custom class. If you would like to use your custom font for any layer, just need to add more class.

lapinpub's picture
lapinpub
Tue, 08/18/2015 - 20:12

Hi, thanks... I'm not sure I quite understand your response.  Can you tell me the file name you are referring to which would contain the custom class?

I was able to get it to work partially by placing the following lines in the sites\all\modules\custom\md_fullscreen_slider\templates\admin\edit_form.tpl.php file down where the other options are available.

            <option value="Conv_signika-regular" data-fontweight="400,700,400italic,700italic">Signika</option>
            <option value="gravelmedium" data-fontweight="400,700,400italic,700italic">Gravel Medium</option>
            <option value="gravelmedium_italic" data-fontweight="400,700,400italic,700italic">Gravel Medium Italic</option>
            <option value="gravelbold" data-fontweight="400,700,400italic,700italic">Gravel Bold</option>
            <option value="gravelbold_italic" data-fontweight="400,700,400italic,700italic">Gravel Bold Italic</option>

This allows the font to be added to the dropdown and does allow you to select the font, however the correct font only appears when you view the actual site.  When in preview/edit mode in the MD_Slider just a placeholder font (Times) is shown.  Appears to be something I missed in the preview?

phuonght's picture
phuonght
Mon, 11/30/2015 - 00:00

Hi Lapinpub,

Sorry for our delay. We tried may times and realized that if you added code for custom font in sites\all\modules\custom\md_fullscreen_slider\templates\admin\edit_form.tpl.php already, so in file style.css of theme also, you need to add:

 @font-face {
font-family: 'Conv_signika-regular';
src: url('../fonts/signika-regular.eot');
src: local('☺'), url('../fonts/signika-regular.woff') format('woff'), url('../fonts/signika-regular.ttf') format('truetype'), url('../fonts/signika-regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.signika { font-family:'Conv_signika-regular',Sans-Serif; }

then copy all those font files following path in file css.

and if the font which you would like to use is https://www.google.com/fonts/specimen/Signika, it is no need to add custom css, in configure of slider, there is a place to add google font and Typekit.

Or in case it still does not work well, you could send us your site url, admin account, FTP account. We would like to help you.


Log in or register to post comments
Have More Idea?

We are here to build your website!

No Universal solution fits all special business requirements. Our experienced team is ready with ideas and state-of-the-art technical solutions to consult the best solution within your budget.