This is the documentation for concrete5 version 5.6 and earlier. View Current Documentation

Most themes use the default "web-safe" font styles. These tend to be rather boring, so you may want to spice up your theme style with some custom fonts!

This is done by using a styling technique known as @font-face.

First, you will need to choose whatever font(s) you will use! Although there are plenty of places that you can get free @font-face fonts, we will use Font Squirrel for this tutorial.

Download any @font-face kit from Font Squirrel. Extract it.

In your theme directory, create a folder called "fonts" (ex. url: www.yoursite.com/packages/demotheme/themes/demotheme/fonts )

Upload all contents of your extracted font-face kit folder - EXCEPT the html file.

Re-name the included stylesheet to "fonts.css"

You will now need to call in the fonts css file in your theme header. To do this, in your header.php file, add the following line of code, preferably after the one for your main theme CSS file:

    <link rel="stylesheet" type="text/css" href="<?php  echo $this->getStyleSheet('fonts/fonts.css')?>" />

From here, you can now apply the font name to any item in your regular theme stylesheet. Doing this is as simple as this:

h1.logo { font-family: 'Custom Font-Face', arial, sans-serif; }

Where 'Custom Font-Face' is the name of the custom font that you added. Be sure to include the single quote marks around it, too.

Loading Conversation