[Matt_OParticipant]

I am trying to add a custom font to my site and can’t get it to work. I’m using integrity stack with Xtheme version 4.6.4 . WP version 4.7.2
Here is what have…

@font-face {
    font-family: 'sakkal_majallaregular';
    src: url('http://tmjmhk.com/123abc456/wp-content/fonts/majalla-webfont.eot');
    src: url('http://tmjmhk.com/123abc456/wp-content/fonts/majalla-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://tmjmhk.com/123abc456/wp-content/fonts/majalla-webfont.woff') format('woff'),
         url('http://tmjmhk.com/123abc456/wp-content/fonts/majalla-webfont.ttf') format('truetype'),
         url('http://tmjmhk.com/123abc456/wp-content/fonts/majalla-webfont.svg#sakkal_majallaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1, h2, h3, h4, h5, h6 {
font-family: 'sakkal_majallaregular'!important;
}

[Nabeel AModerator]

Hi there,

Thanks for writing in! Please follow steps below on how to add custom font

1. Set-up child theme – https://theme.co/x/member/kb/how-to-setup-child-themes/
2. create fonts folder in your child theme directory (wp-content/themes/x-child/fonts)
4. Upload all font files to your fonts folder(wp-content/themes/x-child/fonts) using ftp
5. Add the code below in your child theme’s style.css file

@font-face {
    font-family: 'sakkal_majallaregular';
    src: url('http://tmjmhk.com/123abc456/wp-content/themes/x-child/fonts/majalla-webfont.eot');
    src: url('http://tmjmhk.com/123abc456/wp-content/themes/x-child/fonts/majalla-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://tmjmhk.com/123abc456/wp-content/themes/x-child/fonts/majalla-webfont.woff') format('woff'),
         url('http://tmjmhk.com/123abc456/wp-content/themes/x-child/fonts/majalla-webfont.ttf') format('truetype'),
         url('http://tmjmhk.com/123abc456/wp-content/themes/x-child/fonts/majalla-webfont.svg#sakkal_majallaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'sakkal_majallaregular' !important;
}

For more information please refer to this link https://css-tricks.com/snippets/css/using-font-face/

Hope that helps.

[Matt_OParticipant]

Awesome! It worked perfectly. Thank you

[NicoModerator]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts