[Anthill RealtorsParticipant]

Hi Sir/Madam,

I want to add avenir next to my website but theres no such font in the website
Can you please teach me how to add it?

Thanks in advance!

[ThaiModerator]

Hi There,

Thanks for posting in!

You can take a look at this ticket: https://community.theme.co/forums/topic/adding-custom-font-to-theme-customizer/#post-184533.

Hope it helps 🙂

[Anthill RealtorsParticipant]

Hi I already uploaded the font into the server (with the correct format OTF) but have no idea how to proceed on to step 3 (the codes are a bit confusing)

@font-face {
font-family: ‘FontName’;
src: url(‘http://yoursite.com/fonts/fontname.eot’);
src: url(‘http://yoursite.com/fonts/fontname.eot?#iefix’) format(’embedded-opentype’),
url(‘http://yoursite.com/fonts/fontname.woff’) format(‘woff’),
url(‘http://yoursite.com/fonts/fontname.ttf’) format(‘truetype’),
url(‘http://yoursite.com/fonts/fontname.svg#fontname’) format(‘svg’);
}

Thank you in advance!

Attachments:

You must be logged in to view attached files.

[RupokMember]

Hi there,

Thanks for updating. Your screenshot refers that you have uploaded a zip file of the fonts that doesn’t make any sense. Please upload the font files correctly so that it could be accessible (like you should be able to access the file with direct URL- http://yoursite.com/fonts/fontname.woff). Also make sure to update the site name yoursite.com with you domain instead of just copy-pasting the code. If you feel uncomfortable doing this, you could seek help from a developer to do this for you.

Hope this makes sense.

Cheers!

[Anthill RealtorsParticipant]

Hi there!

So I’m suppose to unzip the zip files and upload the content inside?
Where do I upload the file to? (theres a lot of files in wp-content)

Thanks

[Rue NelModerator]

Hello There,

Yes you need to unzip the files and upload those files in your fonts folder within your WP installation folder. The best location you can place it is in the root directory by creating a fonts folder. Having this way, you can easily access it using the step 3 which would mean that you add a custom css code in your customizer, Appearance > Customize > Custom > CSS

@font-face {
    font-family: 'FontName';
    src: url('http://yoursite.com/fonts/fontname.eot');
    src: url('http://yoursite.com/fonts/fontname.eot?#iefix') format('embedded-opentype'),
        url('http://yoursite.com/fonts/fontname.woff') format('woff'),
        url('http://yoursite.com/fonts/fontname.ttf') format('truetype'),
        url('http://yoursite.com/fonts/fontname.svg#fontname') format('svg');
}

Hope this helps.

[Anthill RealtorsParticipant]

Hi there

Unfortunately I tried to do it but failed again!

Is it possible to get a developer help where I provide credentials

Sorry for the inconvenience caused!

[Rue NelModerator]

Hello There,

To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look and fix the issue? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password
– FTP Hostname
– FTP Username
– FTP Password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[Anthill RealtorsParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

Thank you for the admin credentials. Would you mind pointing us to the exact folder/location where you upload the fonts? This is so we can check and help you better.

[Anthill RealtorsParticipant]

This reply has been marked as private.

[NicoModerator]

Hi There,

This link below is really a great guide on how to add a custom font. You could follow the steps provided.

https://community.theme.co/forums/topic/adding-custom-font-to-theme-customizer/#post-184533

Hope it helps.

Let us know how it goes.

Thanks.

[Anthill RealtorsParticipant]

Hi there!

I already looked through the link but still do not understand how to add fonts!
I kinda requested developer’s help already by providing login credentials so is possible to get a developer to help me on that again??

Sorry for the inconvenience caused!

[ChristopherModerator]

Hi there,

We don’t have your font formats so we can place the files for you.
Because this requires a template change, I’d advise that you setup 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.

After setting up a child theme, create a folder called ‘fonts’ in child theme directory and upload your font files there.

Next add following CSS :

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

Instead of fontname add your real font name.

Hope it helps.

[Anthill RealtorsParticipant]

Hi there I think I am slowly getting what you mean!

However I need confirmation on this!

I uploaded an attachment that shows my root directory!
Please confirm whether this CSS code is correct!

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

Basically I added /public_html/ to the code since thats where the files are stored (am I right??) and replace font name with AvenirNextLTPro-Regular.otf

Thank you so much and sorry for the inconvenience caused!

Attachments:

You must be logged in to view attached files.

[Author]

Posts