Forums

Change fonts to Open Sans

Permalink
Hi I'd like to change my fonts to Open sans G. I'm using a copy of elemental theme.

I've tried changing the variables in default with ~"'Open sans', sans-serif, Arial"; but with no luck :(

Any ideas?

Thanks
p
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi PJSAndo,

Here are the steps required to switch the default font in the Elemental theme.

Before doing this, take note that not all fonts have the same font-weight values. Ideally you want the same number of font weights and similar values. Include only font weights that will be used.
Example:
Titillium Web: 200, 400, 700 ,900
Open Sans: 300, 400, 700, 800

Example: switch from Titillium Web to Open Sans
1. open defaults.less
themes\elemental\css\build\fonts\defaults.less
- delete or comment out this line
@import url(//fonts.googleapis.com/css?family=Titillium+Web:200,400,700,900);

- add your @import font url
@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
PJSAndo replied on at Permalink Reply
Many thanks. Worked perfectly!