[Rue NelModerator]

Hello There,

Upon checking your font, you are using .otf and it is not the standard font and it is not compatible is some browser. You need to convert this font from .otf file to .ttf, .otf, .eot, .woff and .svg files. This is the proper way of using a custom font in your site which ensure that every site visitor is seeing the same font as what you have envisioned. You can use this online font converter tools:
http://www.font2web.com
http://www.freefontconverter.com

Once you have converted your .otf file to all the needed files, you may use this custom css:

@font-face {
  font-family: 'AvenirNextLTPro-Regular';
  src: url('http://anthillrealtors.co.id/wp-content/themes/x-child/fonts/AvenirNextLTPro-Regular.eot');
  src: url('http://anthillrealtors.co.id/wp-content/themes/x-child/fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),
  url('http://anthillrealtors.co.id/wp-content/themes/x-child/fonts/AvenirNextLTPro-Regular.woff') format('woff'),
  url('http://anthillrealtors.co.id/wp-content/themes/x-child/fonts/AvenirNextLTPro-Regular.ttf') format('truetype'),
  url('http://anthillrealtors.co.id/wp-content/themes/x-child/fonts/AvenirNextLTPro-Regular.svg#AvenirNextLTPro-Regular') format('svg');
}

body{
  font-family: 'AvenirNextLTPro-Regular';
}

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

[Anthill RealtorsParticipant]

Hi there!

Unfortunately we still are unable to get the font up there but I sense we are getting close to it!

I attached two attachment to check with you whether

1) Upload in the correct directory
2) Should replace /wp-content/themes/x-child/Fonts with public_html/wp-content/themes/x-child/Fonts

Thank you in advance!

Attachments:

You must be logged in to view attached files.

[ZeshanMember]

Hi there,

Use this CSS code instead:

@font-face {
  font-family: 'AvenirNextLTPro-Regular';
  src: url('http://anthillrealtors.co.id/wp-content/themes/x-child/Fonts/AvenirNextLTPro-Regular.eot');
  src: url('http://anthillrealtors.co.id/wp-content/themes/x-child/Fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),
  url('http://anthillrealtors.co.id/wp-content/themes/x-child/Fonts/AvenirNextLTPro-Regular.woff') format('woff'),
  url('http://anthillrealtors.co.id/wp-content/themes/x-child/Fonts/AvenirNextLTPro-Regular.ttf') format('truetype'),
  url('http://anthillrealtors.co.id/wp-content/themes/x-child/Fonts/AvenirNextLTPro-Regular.svg#AvenirNextLTPro-Regular') format('svg');
}

body{
  font-family: 'AvenirNextLTPro-Regular';
}

The name of your directory is in capital, so I’ve replaced fonts to Fonts.

Thank you!

[Anthill RealtorsParticipant]

Hi there! Sorry for that stubborn mistake!

The font has successfully been uploaded! Just one last question! Not everything is changed to the font I want (Custom Headline, contact form, buttons) is there a universal command to change everything to the font i want?

Sorry and thank you so much

[Rue NelModerator]

Hello Again,

To apply the custom font to all elements in your site, please update your custom css and use this instead:

body, 
body *{
  font-family: 'AvenirNextLTPro-Regular' !important;
}

We would loved to know if this has work for you. Thank you.

[Anthill RealtorsParticipant]

I want to thank you so much for helping in this long and tiring process! Very educational!

Thank you for patience and hope you and have a wonderful year ahead!
Happy 2016!!

[Rue NelModerator]

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

[Anthill RealtorsParticipant]

Hi there!

The code did change everything to avenir next

body,
body *{
font-family: ‘AvenirNextLTPro-Regular’ !important;
}

However, it causes the social icons (and many other icons) to bug and revolution slider fonts to change too?

Is there a way to fix this?

[Rue NelModerator]

Hello There,

Please update again the code

body,
article, aside, footer, header, hgroup, main, nav, section,
h1, h2, h3, h4, h5, h6, p, div
input, button, select, textarea{
  font-family: 'AvenirNextLTPro-Regular';
}

This way it doesn’t remove the font icons. Hope this helps.

[Author]

Posts