Font does not show on website

Hey Anouk,

Thank you for the inquiry.

Where did you get the font? Please note that only Google fonts are allowed in the Custom Font Manager. You may need to load the font and apply it to the elements manually using the @font-face rule.

// https://css-tricks.com/snippets/css/using-font-face-in-css/

Best regards,
Ismael

Hi,

Thanks for the update. Did you get any documentation with your Adobe font? If so, then please share it with us. If not, then you could simply upload the font to your server, then we can help you out with custom CSS for loading it. If you don’t want to do this extra work, then it be better to consider a Google font instead.

Best regards,
Rikard

Hi,

You can upload that to a service like Google Drive or Dropbox for example.

Best regards,
Rikard

Hi,

Thanks, but that file or folder is not shared publicly, so we can’t access it.

Best regards,
Rikard

Hi,

Thanks for that. The file you linked to only contains a font file, so that is what you would need to upload to your server.

Best regards,
Rikard

Hi,
I tested your font file on my demo site and because it is a OTF file type the Custom Font Manager didn’t extract it it only created a folder so in the setting it looks like an option, so as Ismael pointed out above only Google fonts are allowed in the Custom Font Manager.
I tested this workaround, first extract your font zip to your computer, you will see the font is named insigne – Belda Norm Regular.otf change to belda-font.otf for easier use and upload to your site via FTP, for example: /wp-content/uploads/dynamic_avia/avia_type_fonts/belda-font/belda-font.otf anywhere should be fine, this is what worked for me.
Then add this css to your child theme stylesheet, or your parent theme custom.css file or use a plugin like WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets.

@font-face {
  font-family: 'belda-font';
  src: url('/wp-content/uploads/dynamic_avia/avia_type_fonts/belda-font/belda-font.otf') format('opentype');
}

Then to use the font you will create another css rule, this example is for H1 special heading element:

h1.av-special-heading-tag {
	font-family: belda-font;
}

but you can target any element you wish.
Then clear your browser cache and check, this is the results I received:

Best regards,
Mike

Hi,
Can you include an FTP login in the Private Content area so we can upload the font for you?
If you don’t know what FTP is, do you have a cPanel login, or file manager login for your webhost?

Best regards,
Mike

Hi,
Thank you for the admin login to your site, but I need access to your server to add the font file, such as the File Manager in cPanel, or an FTP account, these two articles are for general information as I don’t know what hosting company you are using. Another option would be to ask your hosting company support to place the font file in the location that I posted above, and ensure it is named belda-font.otf
/wp-content/uploads/dynamic_avia/avia_type_fonts/belda-font/belda-font.otf
They will understand and it will be quite easy for them, I’m happy to do it for you but I will need access to your server.

Best regards,
Mike

Hi,
Thanks for the access, I added the font file and added the font-face css to the wpcode plugin, and created a test page linked below to demonstrate that the font is working.
If you explain where you want this font to show on your site I can assist.
Please check the test page.

Best regards,
Mike

Hi,
Thanks, do you mean the H1’s that are currently using the font “Love Ya Like A Sister”, to change all of these I added a wpcode snippet called H1 belda-font with this rule:

#main h1 strong {
	font-family: belda-font;
}

and for the LayerSlider I edited the text layer element by first removing the font “Love Ya Like A Sister” and then when to Style ▸ Advanced Settings ▸ Custom CSS and added this css:

font-family: belda-font;

please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad this helps, Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike

Hi,
I see that you gave the special heading the ID font-family-belda-font so try this css:

#font-family-belda-font h1 {
	font-family: belda-font;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Please try adding the css above to the Enfold Theme Options ▸ General Styling ▸ Quick CSS field
The Developers Settings are for adding custom classes & IDs, for the element it looked like you had the custom ID font-family-belda-font in place, please leave this.

Best regards,
Mike