Docs

[venya]

Hello,

I’m trying the last couple hours to import and use a new non google font. I previously was able to get a google font to work, but have gotten nowhere on a non-google ttf to work.

I converted the ttf to webfont and uploaded to my server. Was unsure if it needed to be in X theme or child folder, so put it in both.

Then, added the text below to my css – tried in main customizer and also in cornerstone page customizer… Tried variations of the url path…

Still not able to get the font to appear anywhere.

I only need it in section 4 of this cornerstone page – section 4, the slanted text on notebook with lines.

http://www.bennyfromtheblock.com/ru/

Thought this might have done the trick…

.x-section-4 .x-section {
font-family: ‘katherine’;
}

Pretty sure I’m close to getting it to work. Not sure where I’ve gone wrong.

Thank you for your help!

@font-face {
font-family:’katherine’;
src: url(‘http://www.bennyfromtheblock.com/bennyfromtheblock/wp-content/themes/x-child/css/fonts/katherine.eot’);
src: url(‘http://www.bennyfromtheblock.com/bennyfromtheblock/wp-content/themes/x-child/css/fonts/katherine.eot?#iefix’) format(’embedded-opentype’),
url(‘http://www.bennyfromtheblock.com/bennyfromtheblock/wp-content/themes/x-child/css/fonts/katherine.woff’) format(‘woff’),
url(‘http://www.bennyfromtheblock.com/bennyfromtheblock/wp-content/themes/x-child/css/fonts/katherine.ttf’) format(‘truetype’),
url(‘http://www.bennyfromtheblock.com/bennyfromtheblock/wp-content/themes/x-child/css/fonts/katherine.svg#fontname’) format(‘svg’);
}

@font-face {
font-family:’katherine’;
src: url(‘./framework/fonts/katherine/katherine.eot’);
src: url(‘./framework/fonts/katherine/katherine.eot?#iefix’) format(’embedded-opentype’),
url(‘./framework/fonts/katherine/katherine.woff’) format(‘woff’),
url(‘./framework/fonts/katherine/katherine.ttf’) format(‘truetype’),
url(‘./framework/fonts/katherine/katherine.svg#fontname’) format(‘svg’);
}

[venya]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this code in child theme’s style.css file:

@font-face {
font-family:'katherine';
src: url('http://www.bennyfromtheblock.com/bennyfromtheblock/wp-content/themes/x-child/css/fonts/katherine.eot');
src: url('http://www.bennyfromtheblock.com/bennyfromtheblock/wp-content/themes/x-child/css/fonts/katherine.eot?#iefix') format('embedded-opentype'),
url('http://www.bennyfromtheblock.com/bennyfromtheblock/wp-content/themes/x-child/css/fonts/katherine.woff') format('woff'),
url('http://www.bennyfromtheblock.com/bennyfromtheblock/wp-content/themes/x-child/css/fonts/katherine.ttf') format('truetype'),
url('http://www.bennyfromtheblock.com/bennyfromtheblock/wp-content/themes/x-child/css/fonts/katherine.svg#fontname') format('svg');
}

Hope it helps.

[Author]

Posts