[MiticaParticipant]

Hello,

I have tried to follow the instructions on several threads to use a custom font for my main menu bar. Here is the code that I put in to my style.css of my child theme. The url of my website is test.tierramitica.com. Can you please take a look to see if I am missing something?

@font-face {

font-family: ‘Conv_Chiller’;

src: url(‘http://test.tierramitica.com/wp-content/wp-content/themes/x-child/Fonts/Chiller.eot’);

src: url(‘http://test.tierramitica.com/wp-content/wp-content/themes/x-child/Fonts/Chiller.otf’),
url(‘http://test.tierramitica.com/wp-content/wp-content/themes/x-child/Fonts/Chiller.woff’)
format(‘woff’),
url(‘http://test.tierramitica.com/wp-content/wp-content/themes/x-child/Fonts/Chiller.ttf’) format(‘truetype’),
url(‘http://test.tierramitica.com/wp-content/wp-content/themes/x-child/Fonts/Chiller.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
.x-topbar {
font-family : ‘Conv_Chiller’;
}

[JadeModerator]

HI there,

Please make sure that you have the font files (.oet, .otf, etc.) uploads through FTP in wp-content/themes/x-child/fonts directory.

Hope this helps.

[MiticaParticipant]

Hello Jade,
Thank you for the help, I had done that, but I did not put in the correct links to the directory, so that is fixed now. However, my h1 headers have still not changed to the font. Is there anything wrong with the code in my style.css:

/*Chiller Font*/

@font-face {

font-family: ‘Conv_Chiller’;

src: url(‘ftp://tierram3@69.195.124.100/public_html/test/wp-content/themes/x-child/Fonts/Chiller.eot’);

src: url(‘ftp://tierram3@69.195.124.100/public_html/test/wp-content/themes/x-child/Fonts/Chiller.otf’),
url(‘ftp://tierram3@69.195.124.100/public_html/test/wp-content/themes/x-child/Fonts/Chiller.woff’)
format(‘woff’),
url(‘ftp://tierram3@69.195.124.100/public_html/test/wp-content/themes/x-child/Fonts/Chiller.ttf’) format(‘truetype’),
url(‘ftp://tierram3@69.195.124.100/public_html/test/wp-content/themes/x-child/Fonts/Chiller.svg.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

h1, .h1 {
font-size: 24px;
color: 68503c;
font-family: font-family: ‘Conv_Chiller’, serif;
font-weight: 500;
}

The size of my h1 headers changed with this code, but not the font family.

Thank you, Jade!

[NicoModerator]

Hi There,

Upon checking the code above, you have duplicated the term font-family.

Please update your CSS code with the code below.

h1, .h1 {
font-size: 24px;
color: 68503c;
font-family: ‘Conv_Chiller’, serif;
font-weight: 500;
} 

Hope it helps.

Let us know how it goes.

Thanks.

[MiticaParticipant]

Hello Nico, Sorry for that, I copied that, but changed it afterwards and it was still not working, and it still isn´t.

[Rue NelModerator]

Hello There,

Thanks for writing in! I am another staff checking on this thread. I noticed some inconsistency in your child theme’s style.css. And the font file path is invalid also. Please have it updated and use this code instead:

/*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/

/*Chiller Font*/
@font-face {
	font-family: 'Conv_Chiller';
	src: url('http://test.tierramitica.com/wp-content/themes/x-child/Fonts/Chiller.eot');
	src: url('http://test.tierramitica.com/wp-content/themes/x-child/Fonts/Chiller.otf'), 
	url('http://test.tierramitica.com/wp-content/themes/x-child/Fonts/Chiller.woff') format('woff'), 
	url('http://test.tierramitica.com/wp-content/themes/x-child/Fonts/Chiller.ttf') format('truetype'), 
	url('http://test.tierramitica.com/wp-content/themes/x-child/Fonts/Chiller.svg.svg') format('svg');
		font-weight: normal;
		font-style: normal;
}

/* eliminate white background everywhere*/
.x-container.main:before {
	background-color: transparent;
}

/* delete white background from sections*/

.page-template-template-blank-4-php .x-main, 
.page-template-template-blank-5-php .x-main, 
.page-template-template-blank-6-php .x-main, 
.page-template-template-blank-8-php .x-main {
	background-color: transparent !important;
} 

/*Navbar green opacity */
body .x-navbar {
  background-color: rgba(196, 223, 156, 0.7);
}

.x-navbar .desktop .sub-menu {
    background-color: rgba(196, 223, 156, 0.9);
}

h1, .h1 {
	font-size: 24px;
	color: 68503c;
	font-family: 'Conv_Chiller', serif;
	font-weight: 500;
}

/*Footer and menu bar*/
.x-colophon.bottom .x-colophon-content, 
.x-colophon.bottom .x-nav li a {
	color: black;
}

/*Header full width*/
.x-navbar .x-container.max {
    max-width: 1500px !important;
    width: 99% !important;
}

Please let us know if this works out for you.

[MiticaParticipant]

Hello Rue Nel, Thank you for checking and debugging my code, but it is still not working here, my h1 headers are still in the normal font.

[Rue NelModerator]

Hello There,

Thanks for updating us in! Please be advised that this is the order of the styles being loaded in your site:
– Stack style
– Child theme’s style.css
– Customizer settings custom css
– Cornerstone’s page custom css

You will need to update your code and use this instead:

x-child-theme-active .site h1, x-child-theme-active .site .h1 {
    font-size: 24px;
    color: #68503c;
    font-family: 'Conv_Chiller', serif;
    font-weight: 500;
}

And by the way, the font will still do not display because there is a CORS issue. http://prntscr.com/di8dwk
To resolve this, please check this out CORS here: https://community.theme.co/kb/solutions-to-potential-setup-issues-font-awesome/

Hope this helps.

[MiticaParticipant]

Hello Rue Nel and thank you. I contacted my host and they told me since I am on shared hosting, these kind of changes are not allowed. It would ‘require a global flag/header changed, and we’re not changing that on shared hosting.’

I am a complete newbie in all of this, but the CORS issue you point out, seems to have to do with the titles of my pages, which I am planning on disabling anyway. The font is not meant for the page titles, it is meant for headers, and headers only.
I may be hanging on to straws here, but is there any way out of this without messing with CORS?

As you already said would happen, the font is still not displaying with the code update.

Thanks for all the help, I really appreciate it.

[LelyModerator]

Hi There,

There’s a syntax error for the previous CSS. Please update to this:

.x-child-theme-active .site h1, .x-child-theme-active .site .h1 {
    font-size: 24px;
    color: #68503c;
    font-family: 'Conv_Chiller', serif;
    font-weight: 500;
}

The dot is added at the start of x-child-theme-active. It should work after that.

Hope this helps.

[MiticaParticipant]

Hello Lely! It works! In addition to changing the code, after which nothing happened, I just put in Style of the custom headline: font-family: chiller (not Conv_Chiller), and the font appeared! Do you see any potential problem if I just keep working this way or is it cool to do it like this? Thank you so much 🙂

[ChristopherModerator]

Hi there,

The font is displaying fine on my end too, so there is no problem.

Thanks.

[MiticaParticipant]

Hello Christopher, that is such great news, thank you so much all of you for helping me out with this, it was super important to be able to get that font on our site 🙂 Topic closed as far as I am concerned 🙂

[Prasant RaiModerator]

You are most welcome. Feel free to ask us again. Have a great day! 🙂

[MiticaParticipant]

Hello Prasant Rai! Almost everything is working out now, except one detail which I think is related to the font: when I surf to test.tierramitica.com, the topbar icons and the arrows to the sides of the menu bar are replaced by the placeholders on the home page. If I go to another page, they appear, and if I then go back to the home page, they are there. So it is just on the initial loading of the home page that there is an issue. Could you please see if there is a conflict somewhere?

Thank you 🙂

[Author]

Posts