[Pietro MParticipant]

Hi,

how can I do to have all the weights of Lato font?

I have put on Custom CSS this code, but I get only 3 weights instead of 5 (I don’t consider italic styles):

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);

Thanks

[LelyModerator]

Hello Pietro,

Thanks for posting in.

X is using Google fonts. You don’t need to import Lato. To set Lato as your font, go to Appearance > Customize > Typography.
Please also check this link: https://theme.co/x/features/typography/.

Hope this helps.

[Pietro MParticipant]

Hello,

thanks for your reply.

Yes, I don’t need to import Lato, but the problem is that I have only 3 weights of that font.

Try to change the font-weight via css on giulialorusso.com

[Rue NelModerator]

Hello There,

If you need to use Lato and five of its font weight, you must turn off first the stand font in X. What you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once your child theme is setup, please insert this code in your child theme’s functions.php

// Remove and replace Lato font
// =============================================================================

function x_remove_replace_lato_font(){
  wp_dequeue_style( 'x-font-standard' );
  wp_enqueue_style( 'lato-font', '//fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic', NULL, X_VERSION, 'all' );
}
add_action( 'wp_enqueue_scripts', 'x_remove_replace_lato_font', 100 );

// =============================================================================

Having this way, you can prevent Lato from being loaded again and again by any plugin. Putting it in your css without removing the standard could create issue and will contribute added server request which also could affect the performance of your site.

Once done, you can use the font weights in your custom css.

If there’s anything else, we can help you with, please let us know.

[Shark BiteParticipant]

Is it same for Josefin Sans font? Is this code correct too? I was also trying to edit different font weights in different headlines…I just couldn’t get the font weight to override in child theme even when I add !important.

// Additional Functions
// =============================================================================

// Remove and replace Josefin Sans font
// =============================================================================

function x_remove_replace_josefin_sans_font(){
wp_dequeue_style( ‘x-font-standard’ );
wp_enqueue_style( ‘josefin-sans-font’, ‘fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic’, NULL, X_VERSION, ‘all’ );
}
add_action( ‘wp_enqueue_scripts’, ‘x_remove_replace_josefin_sans_font’, 100 );

// =============================================================================

[John EzraMember]

Hi there,

Thanks for writing in! It should work the same. Let us know how that goes. Hope this helps – thanks!

[Shark BiteParticipant]

Well, I tried that and it’s not working… for example, I made sure to call the weight in this code

.home #x-section-1 .h-custom-headline {
  margin: 0 0 80px 0 !important;
  padding: 0 0 0 0px;
  font-weight: 100 !important;
}
.home #x-section-1 .h-custom-headline span {
	color: #fff !important;
  font-weight: 100 !important;
}

but the font still show up as bold…

I’m working in localhost so I don’t know how would I show you the code.

[ThaiModerator]

Hi @shark-bite,

Would you mind providing us with your website URL so we can take a closer look?

Many thanks.

[Shark BiteParticipant]

Well, Like I said. I’m working in local host but here’s the real thing but I haven’t made any changes to that website yet. I like to work in localhost to correct any problems that comes up before uploading them online.

http://mikvahcalendar.client.sharkbiteadmin.com/

[RupokMember]

Hello There,

Thanks for updating! Upon checking your given url I can’t see any .h-custom-headline element on #x-section-1 .

Would you please clarify the issue a bit that which element you are trying to change (maybe with a screenshot?)? After getting your problem, we’ll be happy to assist you.

Cheers!

[Author]

Posts