Page Title and Heading different font from rest of site

Hi there!

Thank you for contacting us!

I understand you’d like to clean up the CSS code you’ve applied to change the fonts of your website.

You can try the simplified CSS below:

body, button, input, textarea, select{
// Add CSS for Century Gothic
}

h1, h2, h3, h4, h5, h6{
// Add CSS for Edwardian Script
}

I hope this helps! ??

Thank you! The part for century gothic worked perfectly but it did not work for Edwardian Script. Any thoughts as to why? The CSS I am using is font-family.

Hi there!

This could be due to a number of reasons, but I’d say that most likely your CSS is missing the @font-face rule, in which you specify where that font is to be found on your site. The rule should look like this:

@font-face {
    font-family: "Edwardian Script";
    src: url(path/to/the/font);
}

You must replace path/to/the/font with the path to the font file on your site or an external repository

Note that the process of changing elements via CSS differs from site to site. If the information above doesn’t help, please provide a link to your site, and we will be able to assist further.

@hegenberg Thank you so very much. I have a question, as I’m not as tech savvy as I wish I were. So if I add my font files to my webserver (Bluehost) file manager folders, I don’t know how to enter that as the URL/file location. So in my directory I can see the path folders is /home/hautecr2/fonts

Is that what I would enter as a path?

Hey @hautecreations,

I don’t know how to enter that as the URL/file location. So in my directory I can see the path folders is /home/hautecr2/fonts
Is that what I would enter as a path?

Ideally, yes, that’d be the path you need to add there. However, as we do not have access to your hosting area I am not sure that’d work.

Many hosts have an option to copy the file URL from the dropdown list you get after right-clicking on it. Can you please check if you have this option?

You can also reach out to your host to get the URL path to the font file.

Please do let us know how it goes!

• This reply was modified 2 years, 6 months ago by Sandip Mondal - a11n.
• This reply was modified 2 years, 6 months ago by Sandip Mondal - a11n.

@sandipmondal I don’t have the ability to copy the file location URL. I’m going to ask Bluehost. I’ll be back with more info!

@hegenberg I tried to add this CSS specifying the path and it still did not work. I added it as additional CSS and in the theme editor I added it to the beginning of the code (after the theme introduction verbiage and NOT at the same time as when I added it as additional CSS) and still nothing. My site is https://www.creationsbyroyah.com.

@sandipmondal After speaking with bluehost they told me the URL is (/home4/hautecr2)
>> public_html>> wp-content>> themes >> storefront >> assets >> fonts

I confirmed it, twice and she assured me this was correct. I was reading the article here: https://themeisle.com/blog/custom-fonts-wordpress/ and according to this, it should be https://www.www.creationsbyroyah.com/wp-content/themes/storefront/assets/fonts/Edwardian Script.ttf (based on where I placed the new font). What are your thoughts?

Either way I’ve tried them both and I can’t get it to work. Maybe I’m putting it in the wrong place?

• This reply was modified 2 years, 6 months ago by Royah Marie.

Hi @hautecreations

It seems that your typeface file name has a blank space in it, which can cause issues. Please rename it to Edwardian-Script.ttf

The path to your file should then read as follows:
/wp-content/themes/storefront/assets/fonts/Edwardian-Script.ttf

Hope that helps!

Still nothing. Maybe I’m putting it in the wrong place. The stylesheet for this theme is seemingly disorganized; or maybe I’m just tired or reading it.

Hi @hautecreations

I understand that the CSS code is still not working on your end.

Can you please share with us here the whole CSS code you are using so we can check it further?

Looking forward to your reply.

Sorry all. I got so frustrated with the theme that I changed the theme from Storefront to something else. Applying the Century Gothic was not a problem because I didn’t have to install the font. Here where I am at with the additional CSS.

img.custom-logo {
max-height: 400 !important;
}
img.custom-logo {
max-width: 500px !important;
}
.site-header {
padding-top: 20px;
}
.site-footer {
padding-top: -20;
}
.site-footer {
padding-bottom: 0;
}
.site .entry-header {
display: none;
}
body, button, input, textarea, select{ font-family: Century Gothic
}
h1, h2, h3, h4, h5, h6{ font-family: Century Gothic
}
input,
select,
textarea,
.hentry .entry-content .wp-block-button .wp-block-button__link,
a.button,
a.button:visited,
button,
html input[type=button],
input[type=reset],
input[type=submit],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
border-radius: 20px;
}
a.wp-block-button__link.add_to_cart_button.ajax_add_to_cart {
border-radius: 15px;
}`

Fixed it!!! Thank you. I was not understanding to ALSO add

@font-face {
font-family: “Edwardian Script”;
src: url(path/to/the/font);
}

Thank you for sharing your solution here, much obliged. ??