Docs

[AlCAt]

Hi,

I would like to apply the font “Beyond the mountains” to my H1 and H4 titles but couldn’t find the answer in the forum? Can you help me with CSS? 🙂

Thank you in advance!

[Christian]

Hey there,

Please see the links below for guidance.

http://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/
https://community.theme.co/forums/topic/adding-custom-font-to-theme-customizer/#post-184533

Thanks.

[AlCAt]

This reply has been marked as private.

[Thai]

Hi There,

In this case, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / Password

Don’t forget to select Set as a private reply. This ensures your information is only visible to our staff.

Thanks.

[AlCAt]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. It seem the font files doesn’t exists on your given path if you check them directly – http://hopawaywithus.com/public_html/wp-content/fonts/beyond_the_mountains-webfont.woff

Make sure to upload and link them correctly.

Cheers!

[AlCAt]

This reply has been marked as private.

[AlCAt]

Hi again,

I solved the problem.

I was not supposed to use the whole URL in the source part of the CSS, only what comes after public_html. I created a “fonts” folder in the “wp-content” folder as instructed but I corrected the CSS to:

@font-face {    
font-family: 'beyond_the_mountainsregular'; 
		src: url('wp-content/fonts/beyond_the_mountains-webfont.woff2') format('woff2'),        
		     url('wp-content/fonts/beyond_the_mountains-webfont.woff') format('woff');
font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "beyond_the_mountainsregular";
}

It did the trick!

Thank you again for your help!

[Rue Nel]

Hello There,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.

[AlCAt]

I have another issue now. The font shows up when I’m in the customize preview. But when I display the actual page, the font doesn’t show up.

What could be the problem?

[Lely]

Hello There,

Please try to update your custom CSS to this:

@font-face {    
font-family: 'beyond_the_mountainsregular'; 
				src: url('/wp-content/fonts/beyond_the_mountains-webfont.woff2') format('woff2'),        
						 url('/wp-content/fonts/beyond_the_mountains-webfont.woff') format('woff');
font-weight: normal;
    font-style: normal;
}

When you are in inside page like china, the font will be called like this:
http://hopawaywithus.com/category/travels/china/wp-content/fonts/beyond_the_mountains-webfont.woff2
on homepage it will like this:
http://hopawaywithus.com//wp-content/fonts/beyond_the_mountains-webfont.woff2
It will be correct on homepage but not on inside pages. We need the slash from the start to make sure that the URL is looking from the root directory.

Hope this helps.

[AlCAt]

Hi Lely,

I will test the homepage later as no titles are available yet but so far it looks fine.

Thank you very much for your help! 🙂

[Lely]

You’re welcome!

It would be better if you will use absolute URL like this:
http://hopawaywithus.com/wp-content/fonts/beyond_the_mountains-webfont.woff2

Cheers!

[AlCAt]

I have made the modification. Thank you! 🙂

[Rad]

You’re welcome!

[Author]

Posts