Add new CSS, JS or Fonts

In this tutorial we show you how you can add custom fonts, CSS and JavaScript files to your theme based on the Warp Framework.

The single configuration file /layouts/template.config.php improves setting up the template environment by doing all initialization in one location. It initializes all PHP classes, loads all necessary CSS and JavaScript and also all IE specific files. If you need to load custom CSS and JavaScript files, this is where you do it.

If you create a theme style and want to add some new assets, you can override the default template.config.php file. Just copy /layouts/template.config.php to /styles/YOUR_STYLE/layouts/template.config.php.

Add a CSS file

The template.config.php configuration file loads all the theme's CSS files. If you want to add your own custom CSS file /css/my.css you can do so by using the following syntax:

// load css
$this['asset']->addFile('css', 'css:my.css');

Add a JavaScript file

If you want to add your own script my.js simply copy it to the /js directory of the theme and add the following to the template.config.php configuration file:

// add javascripts
$this['asset']->addFile('js', 'js:my.js');

Add a font

Sometimes you need to add a custom font to your Warp theme, this only takes a few steps. FontSquirrel has a nice service where you can choose between many web fonts and you can even upload a custom font from your pc and transform it to a webfont. Respect the font copyrights, not every font is technically build and/or legally licensed for web usage.

Choose a font which supports Mac Roman subsetting/character encoding if you want to use french, spanish or other latin languages.

Adding a font to your Theme

Put your font files to the theme's /fonts directory. Create a CSS file wich includes the font and give it a proper name like fontname.css. Edit the /layouts/template.config.php file and add a new line in the load fonts section:

// load fonts
$this['asset']->addFile('css', 'template:fonts/myfont.css');

Update the theme's config.xml file to make your font available in the theme settings. Presently 3 different types are available (Body, Header and Menu Font). Just add your new option in the desired font parameter (font1, font2 or font3). In the following example we add our new font to the Body Font parameter.

<field name="font1" type="list" default="default" label="Body Font" description="Select the main body typeface.">
	<option value="arial">Arial</option>
	<option value="lucida">Lucida</option>	
	...
	<option value="myfont">My Font</option>

Next, create a myfont.css file for your font in the /css/font1 directory. This file defines all the selectors you want to apply your new font to. Make sure to check out the existing files in this directory because you want to setup your myfont.css the same way. We continue our example and define the body font in our myfont.css like this:

body { font-family: "MyFontRegular"; }

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!