Custom fonts- help

Support
#1

Hi, I have followed every tutorial and watched videos, and this is still not working for me. I have a few fonts I want to use. Here is what I have tried:
I added them to my wp-content/themes/x-child directory on my server.
I added the following to Additional CSS in Customizer (for brevity, I’ll use one as an example, but they’re all done the same way:

@font-face {
  font-family: 'Vanity-Bold';
  src: url('http://selective.jenwilton.com/wp-content/themes/x-child/Vanity-Bold.eot');
  src: url('http://selective.jenwilton.com/wp-content/themes/x-child/Vanity-Bold.eot?#iefix') format('embedded-opentype'),
    url('http://selective.jenwilton.com/wp-content/themes/x-child/Vanity-Bold.woff') format('woff'),
    url('http://selective.jenwilton.com/wp-content/themes/x-child/Vanity-Bold.ttf') format('truetype'),
}

I then added the following css below that:

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: 'Vanity-Bold';}
a {font-family : ‘Vanity-Bold’;
}
.x-topbar {font-family : ‘Vanity-Bold’;
}
.x-logobar {font-family : ‘Vanity-Bold’;
}
.x-navbar ul li a{font-family : ‘Vanity-Bold’;
}
.x-brand {font-family : ‘Vanity-Bold’;
}
.h-custom-headline {font-family: 'Vanity-Bold';
}

What am I missing? I inspected a headline and my custom font was lined out (see screenshot). This is driving me crazy. Any help would be appreciated!

Pro/Cornerstone Using Font Manager with Externally Hosted @font-face resources
#2

Hi there,

Please make sure you are not using the pretty quotes ’’ in the CSS code.

Use the normal quotes and try adding !important to the font styles like this:

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

Hope this helps.

#3

Thank you. It worked for one of my installed fonts, but not the others. Vanity Bold is the only one I can get to work. Can you explain why? For example, when I choose Whitney Light, which looks like this, it changes to a generic serif (whitney light is actually a sans serif, so even the class is wrong). I’m attaching a screenshot. I added these fonts the same way I added Vanity Bold, so not sure what the issue is?

#4

Also wanted to say that I updated my CSS to this, with no change in output:

.bodoni-be {
  font-family: 'Bodoni-BE';
}

.vanity-bold {
  font-family: 'Vanity-Bold';
}

.vanity-bold-narrow  {
  font-family: 'Vanity-Bold-Narrow';
}

.whitney-light {
  font-family: 'Whitney-Light';
}

.whitney-semi-bold {
  font-family: 'Whitney-Semi-bold';
}

h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6 {
     font-family: 'bodoni-be' !important;
}
#5

Hi There,

Could you please provide us with the URL to your specific page? so that we can check your issue.

Thanks!

#6

Sure. selective.jenwilton.com. I will send credentials in a secure note.

#7

Hi there,

I did my best to find out why this is not working for your installation.

I changed the code to have a correct way and moved it to X > Launch > Options > CSS.

I also added a test page and used the exact font family, but the problem is the font is not loaded.

There must be a plugin of some kind or your hosting service provider blocking the access.

I suggest that you test by changing the theme from X to a normal WordPress theme and deactivate all plugins and then add the code and font there.

See if it works for you.

I just checked the same code on my installation and it worked with no problem. Thank you.

#8

Why would my host be blocking access? The Vanity font works, but not the others. This would indicate to me that the host isn’t blocking anything, as I loaded them all together. I’m using the Bed & Breakfast expanded demo as a base for this site- could that be an issue?

Also, I’m not sure what you mean by you checked the code on your installation. Can you explain?

#9

Hi there,

We mean that we tried all the provided code/CSS in this thread and all works in our own installation (our site). So there is no reason for it to fail.

I checked your sites again and here are what I found.

  1. We recommend that you shouldn’t use ’’, but here is your current CSS.
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: 'Vanity-Bold';}
a {font-family : ‘Vanity-Bold’;}
.x-topbar {font-family : ‘Vanity-Bold’;}
.x-logobar {font-family : ‘Vanity-Bold’;}
.x-navbar ul li a{font-family : ‘Vanity-Bold’;}
.x-brand {font-family : ‘Vanity-Bold’;}
.h-custom-headline {
	font-family: 'Vanity-Bold';
}

It should be, and must be, like this

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: 'Vanity-Bold';}
a {font-family : 'Vanity-Bold';}
.x-topbar {font-family : 'Vanity-Bold';}
.x-logobar {font-family : 'Vanity-Bold';}
.x-navbar ul li a{font-family : 'Vanity-Bold';}
.x-brand {font-family : 'Vanity-Bold';}
.h-custom-headline {
	font-family: 'Vanity-Bold';
}

If you continue doing that, then it will break any surrounding CSS.

  1. You have multiple declatarion of @fon-face on WP Custom CSS and X global custom CSS. Please prevent any duplicate to prevent confusion, but regadless

  2. You have @media query that isn’t properly closed. Like this

@media (min-width: 768px) {
  .x-bnb-room-col-intro {
    padding: 1px 0 0 !important;
    text-align: right !important;
  }
  
.bodoni-be {
  font-family: 'Bodoni-BE';
}

.vanity-bold {
  font-family: 'Vanity-Bold';
}

.vanity-bold-narrow  {
  font-family: 'Vanity-Bold-Narrow';
}

.whitney-light {
  font-family: 'Whitney-Light';
}

.whitney-semi-bold {
  font-family: 'Whitney-Semi-bold';
}

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

It should be like this

@media (min-width: 768px) {
  .x-bnb-room-col-intro {
    padding: 1px 0 0 !important;
    text-align: right !important;
  }
 }

.bodoni-be {
  font-family: 'Bodoni-BE';
}

.vanity-bold {
  font-family: 'Vanity-Bold';
}

.vanity-bold-narrow  {
  font-family: 'Vanity-Bold-Narrow';
}

.whitney-light {
  font-family: 'Whitney-Light';
}

.whitney-semi-bold {
  font-family: 'Whitney-Semi-bold';
}

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

The #2 really creates confusion, please clean it up first and we’ll continue checking. I myself can’t really find which is which, like which one is being applied and which one is causing the issue since each has different font naming.

Thanks!

#10

Is there one that is better than another? I always go through Customize–>Custom–>Global CSS. This time, I chose Additional CSS because it was in a tutorial, but I forgot it was there. Is one better than the other?

#11

Hi there,

It’s not about better than the other, it’s the proper declaration and correct use. If you will follow specific instructions for implementing the font then you will have to be consistent with that instead of mixing all instructions that result in conflicts. Example, if you use Vanity-bold like this,

@font-face {
  font-family: 'Vanity-Bold';

Then you should only use it as 'Vanity-Bold', not vanity-vold, or VanityBold, or any. And you don’t need to declare two Vanity Bold fonts. Like this

@font-face {
  font-family: 'Vanity-Bold';

@font-face {
  font-family: VanityBold;

Since you’ll only use one. And make sure it’s applied to your CSS, like this

h1 { font-family: 'Vanity-Bold'; }

And not these

h1 {
font-family: vanitybold;
}
h1 {
font-family: 'VanityBold';
}

Use it as exactly declared in @font-face.

And it doesn’t matter if you place it within WP Custom CSS or X Global Custom CSS, the important thing is, you placed it once on your page. And for personal recommendation, I recommend using child theme’s style.css to optimize your page.

I also checked and your fonts are now taking effect, but I can’t fully check it since I’m not sure your preferred styling.

Thanks.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.