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

Before doing this, take note that not all fonts have the same font-weight styles. Ideally you want the same number of font weights and similar values. Include only font weights that will be used.

Any changes made to the original Elemental theme files inside the "concrete" folder will be overwritten when upgrading to a new version of concrete5 (concrete\themes\elemental). To prevent modifications from being overwritten, it is recommended to make a copy of the Elemental theme.
How to copy the Elemental theme to use as a base for new themes

Example: switch from Titillium Web to Open Sans

Titillium Web: 200, 400, 700 ,900
Open Sans: 300, 400, 700, 800

1. open defaults.less
themes\elemental\css\build\fonts\defaults.less

delete or comment out the @import font url for Titillium Web

@import url(//fonts.googleapis.com/css?family=Titillium+Web:200,400,700,900);

add your @import font url for Open Sans

@import url(//fonts.googleapis.com/css?family=Open+Sans:800,400,700,300);

2. open defaults.less
themes\elemental\css\presets\defaults.less

  • search for all uses of "Titillium Web" and replace with "Open Sans"
  • go through all the variables with font-weight properties (using the -font-weight suffix) and change the values to the closest font weight values of the new font

Example: Titillium Web

@footer-site-title-type-font-weight: 900;

Open Sans

@footer-site-title-type-font-weight: 800;
  • Open Sans does not have a 900 font-weight style, but it does have an 800 font-weight style
Loading Conversation