Docs

[Noellemena]

Hello!

I have a couple of tweaks to CSS that I need assistance with from you amazing crew of goodness!
I have used custom fonts on so many sites and this site is giving me a run for my money. For the life of me I can get it to only recognize one of the 2 custom fonts. (I almost always use 2 custom fonts and have use the same dang code) I put the CSS at the top of my CSS to make sure no code overrides it, but alas, it still does. Please see links below and login.

*** I cannot get the Read More at the bottom of each post on the blog page to be bigger either. I finally got it to recognize the correct font but cannot get the size to change. Appreciate that too 🙂

[Noellemena]

This reply has been marked as private.

[Lely]

Hi Noelle,

It seems that the font is not loading on your site. See this comparison:http://screencast-o-matic.com/watch/cbVFidQmYc
I have downloaded the font and set it up on my test site. It is there. Please check in with your hosting provider for an error log.

[Noellemena]

This reply has been marked as private.

[Rue Nel]

Hello There,

The font is not displaying correctly because your css code is invalid. Please do update it and use this code instead:

@font-face { 
	font-family: 'harlean-webfont'; 
	src: url('http://danielledonaldson.com/wp-content/fonts/harlean-webfont.eot'); 
	src: url('http://danielledonaldson.com/wp-content/fonts/harlean-webfont.eot?#iefix') format('embedded-opentype'), 
	     url('http://danielledonaldson.com/wp-content/fonts/harlean-webfont.woff') format('woff'), 
	     url('http://danielledonaldson.com/wp-content/fonts/harlean-webfont.ttf') format('truetype'), 
	     url('http://danielledonaldson.com/wp-content/fonts/harlean-webfont.svg') format('svg');
}

@font-face { 
	font-family: 'adorn_slab_serif-webfont'; 
	src: url('http://danielledonaldson.com/wp-content/fonts/adorn_slab_serif-webfont.eot'); 
	src: url('http://danielledonaldson.com/wp-content/fonts/adorn_slab_serif-webfont.eot?#iefix') format('embedded-opentype'), 
	     url('http://danielledonaldson.com/wp-content/fonts/adorn_slab_serif-webfont.woff') format('woff'), 
	     url('http://danielledonaldson.com/wp-content/fonts/adorn_slab_serif-webfont.ttf') format('truetype'), 
	     url('http://danielledonaldson.com/wp-content/fonts/adorn_slab_serif-webfont.svg#adorn_slab_serif-webfont') format('svg');
}

h3, h4, h5, h6, a.more-link { 
	font-family: "harlean-webfont";
}

h1, h2, h6, #site-logo, .post-title, .widgettitle { 
	font-family: "adorn_slab_serif-webfont";
}   

Hope this helps. Please let us know how it goes.

[Noellemena]

The spaces you have between lines in the code above, is that ok??? I thought were not supposed to have any blank lines. Should I delete them or leave the spaces as you have it??

**Note I did use the code exactly as it is above and it worked. Now I have to go through and find out the difference. I had it all lined up like above in the beginning except no spaces. I will figure it out. I am just so thankful you got it!!!!!!!

[Rad]

Hi there,

It’s okay, it’s separated by block { } and comma.

And you’re welcome, glad it works now.

Cheers!

[Noellemena]

I am so sorry that I have had so many issues on this site! Thank you for your patience!

On the shop page:
http://danielledonaldson.com/shop/

The titles to the products here are showing in the script font (harlean) but we want it to be Adorn. Even though it is doing it correctly on blog post titles and other titles, I just cannot get it to adjust in this spot.

*also for the titles to be centered on these products as well. I already have the blog post and page titles centered, but again these are not behaving 😉

Thank you so so soooooo much!

[Noellemena]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.product .entry-header h3 a {
    font-family: "adorn_slab_serif-webfont";   
}

@media (max-width: 767px) {
body .entry-title {
    font-size: 250% !important;
}
}

@media (max-width: 480px) {
body .entry-title {
    font-size: 140% !important;
}
}

Hope that helps.

[Noellemena]

Thank you!

This part to change the Shop Products on the Shop page title font to adorn is not working.

.product .entry-header h3 a {
    font-family: "adorn_slab_serif-webfont";   
}

If you see in the CSS, H3 is assigned to Harlean font which we want to stay.
But H3 is what I think X uses for Product titles so it is getting confused.

Thoughts??

[Christopher]

Hi there,

Please update your code to :

.woocommerce li.product .entry-header h3 {
    font-family: "adorn_slab_serif-webfont";
}

Hope it helps.

[Noellemena]

It Finally did!! It wants to inherit the size of h3 and I cannot get it to adjust.

I used:

.woocommerce li.product .entry-header h3 {
    font-size: 10px; !important;
    text-align: center;
}

and the center works but not the size. I never have so many issues! 🙂 I really don’t. But I usually never need so many aspects of h3 to be different fonts, different sizes, colors etc.

THANK YOU!

[Christopher]

Please add this code :

.woocommerce li.product .entry-header h3 a {
    font-size: 11px;
}

Hope it helps.

[Noellemena]

It did, you all had my back! THANK YOU! I save every CSS I get from you guys to refer to when needed & I cannot seem to figure it out. I know how to use the inspect element but sometimes it just does not come together. I need to go read about why in this instance you added the letter a after h3 and it made it work.

THANK YOU!

[Author]

Posts