@font-face troubleshooting

[radiantaction]

Hello,
I've gone round and round with this and am stuck. I am trying to use a custom font I have purchased. I used Fontsquirrel to create a webkit and uploaded to the child theme with a new folder called "fonts". I know I'm missing some key ingredient but I can't figure out what. I added a folder to my child theme called "fonts".

This is what I've added to the stylesheet:

@font-face {
font-family: 'jenna_sueregular';
src: url('wp-content/themes/LEC/fonts/jennasue-webfont-webfont.eot');
src: url('wp-content/themes/LEC/fonts/jennasue-webfont-webfont.eot?#iefix') format('embedded-opentype'), url('wp-content/themes/LEC/fonts/jennasue-webfont-webfont.woff2') format('woff2'), url('wp-content/themes/LEC/fonts/jennasue-webfont-webfont.woff') format('woff'), url('wp-content/themes/LEC/fonts/jennasue-webfont-webfont.ttf') format('truetype'), url('wp-content/themes/LEC/fonts/jennasue-webfont-webfont.svg#jenna_sueregular') format("svg");
font-weight: normal;
font-style: normal;
}

And then I have this as the selector:
.home-banner .hb-content-wrap h1 {
font-family: 'jenna_sueregular';
}

The site is behind a coming soon page right now.

http://lindaeastoncoaching.com/

[Victor Font]

The url is wrong and you don't need the single quotes in the url. The url location is relative to the style sheet directory. All you need is:

url(fonts/jennasue-webfont-webfont.eot)

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[radiantaction]

Hi Victor,
Thank you. Unfortunately I'm still stuck. I wonder if I need to reference the style sheet? If you need me to take it out of maintenance mode I can do that.

I've cleaned up my css. I now has:
@font-face {
font-family: 'jenna_sueregular';
src: url(fonts/jennasue-webfont-webfont.eot);
src: url(fonts/jennasue-webfont-webfont.eot?#iefix') format('embedded-opentype'),url(fonts/jennasue-webfont-webfont.woff2) format('woff2'),url(fonts/jennasue-webfont-webfont.woff) format('woff'),url(fonts/jennasue-webfont-webfont.ttf') format('truetype'), url(fonts/jennasue-webfont-webfont.svg#jenna_sueregular) format("svg");
font-weight: normal;
font-style: normal;
}

There are two lines of text I am targeting.

This is the first, it displays the default font, not Jenna Sue. I have used font-family: 'jennasue' & "jenna_sue" & 'jenna_sueregular' to no avail.
.home-banner .hb-content-wrap h1 {
font-family: 'jennasue';
font-size: 85px;
letter-spacing: 0;
text-shadow: none;
text-transform: capitalize;
}

This is the second font. It displays Jenna Sue but only on my computer (because I have it installed)
.home-banner .hb-content-wrap h2 {
font-family: "jenna sue";
font-size: 71px;
letter-spacing: 0;
text-shadow: none;
text-transform: capitalize;
}

[Victor Font]

This is your css with typos corrected:

@font-face {
	font-family: 'Jenna-Sue';
	src: url(fonts/jennasue-webfont-webfont.eot);
	src: local('Jenna-Sue'), local('Jenna-Sue-Reglar'), url(fonts/jennasue-webfont-webfont.eot?#iefix) format('embedded-opentype'), url(fonts/jennasue-webfont-webfont.woff2) format('woff2'),url(fonts/jennasue-webfont-webfont.woff) format('woff'), url(fonts/jennasue-webfont-webfont.ttf) format('truetype'), url(fonts/jennasue-webfont-webfont.svg#jenna_sueregular) format('svg');
	font-weight: normal;
	font-style: normal;
}

home-banner .hb-content-wrap h1 {
	font-family: 'Jenna-Sue';
	font-size: 85px;
	letter-spacing: 0;
	text-shadow: none;
	text-transform: capitalize;
}

home-banner .hb-content-wrap h2 {
	font-family: 'Jenna-Sue';
	font-size: 71px;
	letter-spacing: 0;
	text-shadow: none;
	text-transform: capitalize;
}

Your quote marks we're all messed up. You have to make sure you use straight quotes for everything. You had a mix of straight quotes, typographer's quotes, and back-ticks.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[radiantaction]

Hi Victor,
I feel terrible because it is still not working. I used your new code (thank you!!). I have taken it out of maintenance mode so you can see it if you feel inclined.

I haven't referenced the style sheet anywhere that came with the webkit. Do I need to do this?

website is: http://lindaeastoncoaching.com

Thank you so much for working with me on this. It's why I've never used custom fonts. Every time I do I can never figure it out. I'm really hoping to learn!

Warmly,
Kirsten Hope

[Victor Font]

Kirsten, it's working perfectly. The attached image is what I am seeing. It's identified in your CSS as Jenna-Sue. You're probably experiencing a caching issue.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[radiantaction]

Hi Victor,
I'm so confused! I do see the "jenna sue" is displaying in some areas. It always has shown in the widget titles but it still does not display on my ipad. Actually now that I look at is on my ipad several of the sans serif fonts display as serif fonts on ipad.

After clearing my cache on all devices it still does not display jenna sue even though chrome inspector says it does. Here is a screenshot of what it looks like with different "font family" selectors used. Even if is is displaying jenna sue (h1) it still only shows on my computer, not the ipad.

http://lindaeastoncoaching.com/wp-content/uploads/2015/08/font-issue.jpg

I'm stumped.

[Victor Font]

I'm not sure what you did, but when I inspect element, I see the Jenna-Sue but it is not tied to your style.css. It has a line number of /:1. When I look deeper, it appears that you are importing a style sheet from somewhere. Your theme's style sheet has one reference to Jenna-Sue but it is spelled incorrectly as jenna sue.

At this point, we are beyond where I can help without diving into your code. Also the theme you are using is not a Studio Press theme. It's a custom version of the Flex theme. You may have to hire someone or get help from the Flex theme developer.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts