Slider Revolution magento extension FAQ

Magento 2: Custom font in Slider Revolution

Slider Revolution allow you to use wide variaty of google fonts. But sometimes it is not enough and you want to include custom font. Use custom font in Slider Revolution require several steps to go. For this example we’ll use Ubuntu font from Transfonter Examples.

  • Following samples was tested on magento 2.3.0
  • If you do not want to go thru the tutorial and manually create all files, check Ready-to-go package
  • You need to update file locations and code to correct values

Include the font both on frontend and backend

Frontend

– download or prepare your custom font(s) files
– add font files to your local theme directory. We will use Nwdthemes/theme as sample theme.
FOLDER: app/design/frontend/Nwdthemes/theme/web/fonts/Ubuntu/

– create a css file with following content. We use “Custom Ubuntu” as font name cause google fonts also has Ubuntu font and Revolution Slider will try to load it instead.
FILE: app/design/frontend/Nwdthemes/theme/web/css/ubuntu.css

@font-face {
	font-family: 'Custom Ubuntu';
	src: url('../fonts/Ubuntu/Ubuntu.eot');
	src: url('../fonts/Ubuntu/Ubuntu.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Ubuntu/Ubuntu.woff') format('woff'),
		url('../fonts/Ubuntu/Ubuntu.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

– add font css to your theme layout.

Your theme might already contain default_head_blocks.xml. In this case you just need to insert line with css file.
<css src="css/ubuntu.css" /> into head section.

FILE: app/design/frontend/Nwdthemes/theme/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/ubuntu.css" />
    </head>
</page>

Backend

Its more tricky as we need to create child theme for backend and activate it using dependency injection instructions.

Creating admin theme

Our theme will use Magento/backend as parent theme. More information about creating admin theme can be found in Magento Documentation – Create an Admin theme.

Lets go thru the list of files we need to create. Our theme will be called Nwdthemes/backend and use Magento/backend as parent theme.

FILE: app/design/adminhtml/Nwdthemes/backend/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>NWDthemes Backend theme</title>
     <parent>Magento/backend</parent>
</theme>

FILE: app/design/adminhtml/Nwdthemes/backend/registration.php

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'adminhtml/Nwdthemes/backend', __DIR__);

– add font files to your local theme directory.
FOLDER: app/design/adminhtml/Nwdthemes/backend/web/fonts/Ubuntu/

– create a css file with following content
FILE: app/design/adminhtml/Nwdthemes/backend/web/css/ubuntu.css

@font-face {
	font-family: 'Custom Ubuntu';
	src: url('../fonts/Ubuntu/Ubuntu.eot');
	src: url('../fonts/Ubuntu/Ubuntu.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Ubuntu/Ubuntu.woff') format('woff'),
		url('../fonts/Ubuntu/Ubuntu.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

– add font css to your theme layout.
FILE: app/design/adminhtml/Nwdthemes/backend/Magento_Backend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/ubuntu.css"/>
    </head>
</page>

Creating extension to enable the theme

Now we need to tell magento that it should use our NWdthemes/backend theme for admin. It can be done with help of dependency injection instruction to pass theme name as argument to Magento\Theme\Model\View\Design class. If you already have custom extension(s) you can only create /etc/adminhtml/di.xml in your module.

IMPORTANT
The module must load after the Magento_Theme module. Be sure to specify correct sequence in etc/module.xml.

Our basic module will be called Nwdthemes/CustomFont consist of three files:

FILE: app/code/Nwdthemes/CustomFont/registration.php

<?php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Nwdthemes_CustomFont', __DIR__);

FILE: app/code/Nwdthemes/CustomFont/etc/module.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Nwdthemes_CustomFont" setup_version="0.0.1">
		<sequence>
			 <module name="Magento_Theme"/>
		 </sequence>
    </module>
</config>

FILE: app/code/Nwdthemes/CustomFont/etc/adminhtml/di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <!-- Admin theme. Start -->
    <type name="Magento\Theme\Model\View\Design">
        <arguments>
             <argument name="themes" xsi:type="array">
                 <item name="adminhtml" xsi:type="string">Nwdthemes/backend</item>
             </argument>
         </arguments>
    </type>
    <!-- Admin theme. End -->
</config>

To install it run the following console commands in Magento 2 root folder:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
php bin/magento cache:clean

Install ready-to-paste package

Use font in Slider Revolution

Now we have the font in admin and frontend. To use it choose slider you want to edit and go to slide page. Select text layer and simply type font name in “Font Family” field.

Custom font in Slider Revolution

Useful links

How to use custom font in Slider Revolution Magento 1
Magento 2 CLI Complete commands list
Using custom fonts
Create an Admin theme
Apply an Admin theme

Leave a Reply

Your email address will not be published. Required fields are marked *