Adding Non-google fonts to Sydney customiser

Hi, I’m having a problem trying to add a font that isnt on Google fonts. Can someone help please?

I’m trying to add Nexa light for my body text and Nexa Bold for my header text.

Cheers,

Dave

Dear Dave,

I assume you have downloaded these fonts:

  • NexaLight.otf
  • NexaBold.otf

Then, please try to do the following:

  1. Generate a web font packs for Nexa light & bold separately using this tool.
  2. Download Sydney child theme and unzip it.
  3. Create a new folder namely “font-face” to store your font files. So, you will have: sydney-child/font-face
  4. Copy the following fonts which you generated:
  • NexaLight.eot
  • NexaLight.otf
  • NexaLight.ttf
  • NexaBold.eot
  • NexaBold.otf
  • NexaBold.ttf

into the font-face folder.

  1. Open the sydney-child/style.css file, then add the following code:

@font-face {
  font-family: "NexaLight";
  src: url('font-face/NexaLight.eot');
  src: url('font-face/NexaLight.eot?#iefix') format('embedded-opentype'),
       url('font-face/NexaLight.woff') format('woff'),
       url('font-face/NexaLight.ttf') format('truetype');
}

@font-face {
  font-family: "NexaBold";
  src: url('font-face/NexaBold.eot');
  src: url('font-face/NexaBold.eot?#iefix') format('embedded-opentype'),
       url('font-face/NexaBold.woff') format('woff'),
       url('font-face/NexaBold.ttf') format('truetype');
}

/* Body font */
body,
#mainnav ul ul a{
  font-family: "NexaLight", sans-serif;
}

/* Heading font */
h1, h2, h3, h4, h5, h6, #mainnav ul li a, .portfolio-info, .roll-testimonials .name, .roll-team .team-content .name, .roll-team .team-item .team-pop .name, .roll-tabs .menu-tab li a, .roll-testimonials .name, .roll-project .project-filter li a, .roll-button, .roll-counter .name-count, .roll-counter .numb-count button, input[type="button"], input[type="reset"], input[type="submit"]{
  font-family: "NexaBold", sans-serif;
}


Save changes

  1. Zip the child theme folder, then install and activate.

I hope this reply helps.

Regards,
Kharis

1 Like

Hey Kharis,

Thats great thank you. Before I install the child theme how do I prevent it from overriding my existing website content?

Cheers,

Dave

It’s alright, it didn’t. But for some reason the P, U & 0 aren’t showing correctly. Any reason why that is?

Thanks so much for your help,

Dave

Dear Dave,

What do you mean by “P, U & 0”? Could you please refer me to a page URL (or something else) where I can see it?

Regards,
Kharis

I commend you on the clarity and succinctness of your solution to this issue. I followed these instructions to the letter, except that the two fonts involved are BelweBT-Medium and BelweStd-LightItalic.

I activated the theme Sydney for our site (http://www.windsorheightsvoices.net) and then activated the child theme of Sydney. The font displayed for the title was not BelweBT-Medium as I had expected and when I looked under the font customizer, I found Raleway:400,500,600 (the default) font set for headers. I found no alternative font listed.

I am sure, almost to the point of certainty, that the directions followed were done so to the letter. I wonder if there is some additional step I am supposed to take which was not outlined in the directions?

One additional matter, unrelated to the issue with the fonts: Is there a particular reason why the title for our site appears to be all bunched together on the left hand side of the page?

Many Thanks!

Frank

Hi Kharis,

By that I mean those specific characters aren’t showing up correctly. If you have a look at my site http://platinumrefined.co.uk/ I hope you can see the issue I am having.

Thanks for your help and as Frank said the instructions were perfect.

Many thanks,

Dave

Hello there,

I don’t see any issue on my end. The fonts have properly applied as seen on these screenshots:

Cloudup

Cloudup

Am I missing something? Please advice.

Regards,
Kharis

Hey, yeah can you not see how the “P” is partially missing? That’s not usual for that font.

Cheers,

Dave

I saw it, but it isn’t code-related issue. The font you are using seems contain a minor bug. Where did you get those fonts? Could you please refer the URLs where I can download it?

Regards,
Kharis

http://www.coolletters.net/fonts/http://www.tattoofontmaker.com/fonts/

Hello @fab23,

Which font did you use? What will happen if you temporarily uninstall that font?

Regards,
Kharis

I already have child theme and I did quite some customization. Could I just add font face folder to my current child theme?

Thanks,
Anja

Hello Anja,

Yes, please follow this instructions.

Regards,
Kharis