Return to previous page

Font in breadcrumb title - by marlinda - on WordPress WooCommerce support

This topic has 15 replies, 4 voices, and was last updated 9 years, 1 months ago ago by Robert Hall

marlinda

Participant

February 18, 2015 at 11:20

Hi

In the demo there is a different font in the breadcrumb title bar. I like this but cannot figure out where I change this (and only this). Can you please guide me in the right direction. Thanks.

#43274 Copied

14 Answers
Stan Russell

Participant

February 18, 2015 at 15:39
Hello,
to change it you need to edit .page-heading .title class in your custom.css.
For example:
```
.page-heading .title{
color:green
}
```
Regards,
Stan Russell.
#43378 Copied
marlinda

Participant

February 18, 2015 at 21:20

So if I want to change the font type it would look like this???:

.page-heading .title{font-family: “cabin sketch”}

And I should add it to default.custom.css?

It doesn’t work, so what am I doing wrong?

#43533 Copied

Robert Hall

Support staff

February 18, 2015 at 21:25

Hello,

You can use @font-face to add new font.
http://css-tricks.com/snippets/css/using-font-face/

All CCS changes you must do in custom.css file.
Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

Regards,
Robert Hall.

#43535 Copied

marlinda

Participant

February 18, 2015 at 21:57

Thank you for your quick reply!

This is quite new to me so I could really use some more help. I’ve seen the video now so that part is ok. But font face is somewhat unclear. I have to do this even though I’m using a google web font?

This is what I’ve added to the css file, but it doesn’t work. What should I change?

@font-face {
font-family: ‘cabin sketch’;
src: url(‘webfont.eot’); /* IE9 Compat Modes */
src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘webfont.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘webfont.woff’) format(‘woff’), /* Pretty Modern Browsers */
url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
}

.page-heading .title{
font-family: ‘Cabin Sketch’
}

#43542 Copied

marlinda

Participant

February 18, 2015 at 23:36

OK, I think I’ve come a little bit further. I found this http://www.fonts2u.com/cabin-sketch-regular.font and downloaded the @font-face kit.

I’ve placed the 4 font types in xxx/public_html/wp-content/themes/royal/fonts

and the following in the custom.css file:

/* @font-face kit by Fonts2u (http://www.fonts2u.com) */ @font-face {font-family:”Cabin Sketch Regular”;src:url(“CabinSketch-Regular.eot?”) format(“eot”),url(“CabinSketch-Regular.woff”) format(“woff”),url(“CabinSketch-Regular.ttf”) format(“truetype”),url(“CabinSketch-Regular.svg#CabinSketch-Regular”) format(“svg”);font-weight:normal;font-style:normal;}

.page-heading .title{
font-family:’Cabin Sketch Regular’;}

BUT….still not working… What am I doing wrong?

Huge thank you for your help!

#43561 Copied

Eva Kemp

Support staff

February 19, 2015 at 09:21

Hello,

In src code you should write the path to your font, for example:
http://wpsites.net/web-design/fonts-wordpress/
http://premium.wpmudev.org/blog/adding-custom-fonts-to-wordpress-with-font-face-and-css/

Thank you.
Regards,
Eva Kemp.

#43633 Copied

marlinda

Participant

February 19, 2015 at 11:13

Hi Eva

I did another try with one of the recomended plugins; WP Google Fonts. It was easy and that part of the process should be ok now.

But no matter what I do, the bread crumb title doesn’t change. Is this really what I should add to custom.css:

.page-heading .title{font-family: “cabin sketch”}

#43664 Copied

Eva Kemp

Support staff

February 19, 2015 at 15:38

Hello,

Please provide us with wp-admin panel credentials in Private Content to check the issue.

Thank you.
Regards,
Eva Kemp.

#43752 Copied

marlinda

Participant

February 19, 2015 at 20:06

Thanks, see private content for login details.

Please, contact administrator
for this information.

#43836 Copied
Eva Kemp

Support staff

February 20, 2015 at 00:20
Hello,

I’ve added this code in custom.css file to change font for breadcrumbs:
```
.bc-type-3 a, .woocommerce-breadcrumb, .breadcrumbs {
    font-family: cabin sketch !important;
}
```
Clear your browser cache and check.

Thank you.
Regards,
Eva Kemp.
#43892 Copied
marlinda

Participant

February 20, 2015 at 09:43

Hi Eva

Thanks but this changed the wrong text. It changed the breadcrumbs, not the title above it.
See private content for more info.

Please, contact administrator
for this information.

#43973 Copied
Eva Kemp

Support staff

February 20, 2015 at 10:14
Hello,

Please add this code in custom.css file:
```
.page-heading .title {
    font-family: cabin sketch !important;
}
```
Thank you.
Regards,
Eva Kemp.
#43986 Copied
marlinda

Participant

February 20, 2015 at 11:17

Excellent, thank you!

#44018 Copied

Robert Hall

Support staff

February 20, 2015 at 11:18

Hello,

You’re welcome!

Regards,
Robert Hall.

#44020 Copied
Tagged: breadcrumb, font, templates, title, woocommerce, wordpress
Viewing 15 results - 1 through 15 (of 15 total)