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
Related Tutorials
- 8
- 0
- 8
- 0
- 12
- 0
- 13
- 0
- 20
- 0
- 14
- 0
- 8
- 0
- 0
- 4
- 0
- 17
- 0
- 6
- 0
- 32
- 0
- 2
- 0
- 13
- 0
- 8
- 0
- 16
- 0
- 24
- 0
- 75
- 0
- 29
- 0
- 6
- 0
- 11
- 0