Add Custom Font

[Nic_Design]

I am trying to add a custom font to my child theme. I have uploaded the font files to a folder called “fonts” in my child theme and added this code to the style.css file:

@font-face {
font-family:'Wicked Grit';
	src: url('http://meadgarden2017.wpengine.com/wp-content/themes/x-child/fonts/WickedGrit.ttf') format('truetype'),;  
font-weight:normal;
	font-family:'FrutigerLTStd Roman';
	src: url('http://meadgarden2017.wpengine.com/wp-content/themes/x-child/fonts/FrutigerLTStd55RomanRegular.otf') format('truetype'),;  
	font-weight:normal;
	font-family:'FrutigerLTStd Light';
	src: url('http://meadgarden2017.wpengine.com/wp-content/themes/x-child/fonts/FrutigerLTStd45LightRegular.otf') format('truetype'),;  
	font-weight:100;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, blockquote {
	font-family: 'Wicked Grit', 'Times New Roman' !important;
	font-weight:normal;
	opacity:.80;
}

body, input, button, select, textarea {
	font-family:'FrutigerLTStd Light', 'Times New Roman' !important;
	font-weight:100;
}

The file paths are correct and if you enter them into a browser it will download the file but when I view the site all I see is Times New Roman.

I’ve looked at the similar topic: https://theme.co/apex/forum/t/custom-font-not-working/675 but changing to single quotes and adding the code to the customizer did not solve the problem. Please help.

[friech]

Hi There,

Thank you for writing in, those are 3 different fonts. You should have declare each of those with its own @font-face statement. Please update your CSS code to this:

@font-face {
    font-family: 'Wicked Grit';
    src: url('./fonts/WickedGrit.ttf') format('truetype');  
}

@font-face {
    font-family: 'FrutigerLTStd Roman';
    src: url('./fonts/FrutigerLTStd55RomanRegular.otf') format('truetype');  
}

@font-face {
    font-family: 'FrutigerLTStd Light';
    src: url('./fonts/FrutigerLTStd45LightRegular.otf') format('truetype');  
}

Also remove the two lines of @import statement you have on top of your child theme’s style.css file, that is not how @import statement works.

Hope it helps,
Cheers!

[Nic_Design]

Thanks! It’s working now.

[friech]

We’re delighted to assist you with this.

Cheers!