Body font applying to heading fonts

[slurmzmckenzie]

I am trying to use Open Sans 400 for the body and Open Sans 300 for the headings.

However, when I change the font in the “Standard Google Font” section that is supposed to apply to standard body fonts it affects all the headings fonts too.

The CSS is showing font-weight: 300; for the headings but the font isn’t being loaded.

[Tahir – SUPPORT]

Hi,
Can you please provide url so i can confirm if there is some file missing in your installation or some theme issue.

Thanks
Tahir

[slurmzmckenzie]

This reply has been marked as private.

[slurmzmckenzie]

I have changed the font’s to lato but hasn’t made a difference.

in the header its got:

<!--// GOOGLE FONT LOADER //-->
		<script>
			var html = document.getElementsByTagName('html')[0];
			html.className += '  wf-loading';
			setTimeout(function() {
			  html.className = html.className.replace(' wf-loading', '');
			}, 3000);
			
			WebFontConfig = {
			    google: { families: ['Lato:400', 'google', 'Lato:400',  'Vidaloka'] }
			};
			
			(function() {
				document.getElementsByTagName("html")[0].setAttribute("class","wf-loading")
				//  NEEDED to push the wf-loading class to your head
				document.getElementsByTagName("html")[0].setAttribute("className","wf-loading")
				// for IE
			
			var wf = document.createElement('script');
				wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
				 '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
				wf.type = 'text/javascript';
				wf.async = 'false';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(wf, s);
			})();
		</script>

but it is not loading the 300 weight that I’ve got set for the headings

[Tahir – SUPPORT]

Hi,

Do you have version 1.1 ? . If not please update. I just tested on my local server and both seem to change appropriately.

Thanks
Tahir

[slurmzmckenzie]

yeah I’ve got the newest version. If this line loads them in order of what they are set in the font options area (header, body, menu) the it seems like its trying to load one of the fonts just as ‘google’.

google: { families: ['Lato:400', 'google', 'Lato:400', 'Vidaloka'] }

I’ll try uploading the 1.1 files again and see what happens.

[Tahir – SUPPORT]

Let me know if update to 1.1 fixed it.

Thanks
Tahir

[slurmzmckenzie]

I reapplied the 1.1 theme files and the problem is still there. Ive fixed it for the time being with customer CSS for lato 300.

@font-face { 
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/nj47mAZe0mYUIySgfn0wpQ.ttf) format('truetype');
}

If you’re testing it on your own you need to make sure that the body font and footer font are set to another font. I’ve got Menu set to 700 weight and body to 400 and headings to 300. It is successfully applying the 300 weight in the CSS but it is not loading the font so it is not displayed as 300 weight. You won’t notice it if you also have the body text set to the same font because then the font will be successfully loaded.

[Tahir – SUPPORT]

Hi,
Thanks for the detailed explanation. Ed will look into it as soon as he is back from Holidays.

Tahir

[Swift Ideas – Ed]

Thanks for letting me know about this, it was an issue with the font loader config.

Fixed for the v1.2 update due in the next few days.

– Ed