[Resolved] Custom font

[David]

The syntax should look like this

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

I.E each of the URLs are comma separated.

[dgainesj]

Thank you David! I fixed those commas, and the custom font is still not appearing…

Anything else to try?

Thanks!
Dina

[Tom]

Any chance you can send us temporary admin login details so we can take a quick look?: https://generatepress.com/contact

If so, be sure to mention this topic.

Thanks!

[dgainesj]

Hi it’s me again with another custom font question…
Or rather, the same custom font question… sorry I still don’t seem to get it 🙁

So, the site is:
http://sifrei-meir-panim.com/

I am trying to add the Hebrew font Vilna to the customizer.

I only have a ttf file for this font, not the other files. Could that be the issue? The thing is, the custom font does show up in the Elementor fonts list with only that single file, so I hope we can work out the customizer as well.

Here’s what I did:

>> I uploaded the ttf file to the custom fonts section of Elementor. It now is also in the media files.
>> I put this code in Simple CSS:
@font-face {
font-family: ‘Vilna’;
src:url(‘http://sifrei-meir-panim.com/wp-content/uploads/2020/02/Vilna.ttf’) format(‘truetype’);

>> I put this code in Code Snippets:
add_filter( ‘generate_typography_default_fonts’,’tu_add_system_fonts’ );
function tu_add_system_fonts( $fonts ) {
$fonts[] = ‘Vilna’;
return $fonts;
}

That’s it, correct? It should now appear in the customizer? But it doesn’t. I know it is something I keep on doing or not doing.

Thanks for your help!
Dina

[Tom]

The second code in Code Snippets should make it appear at the bottom of the “System fonts” section on your font family selects in the Customizer. If it’s not there, make sure all caches (plugins, server etc..) have been cleared.

Also, your first CSS snippet is missing the closing } character.

Let me know 🙂

[dgainesj]

Hi Tom,

I cleared the cache (in chrome and with super cache plugin) and I fixed that bracket. Still no Vilna font.

Thoughts??? Or maybe there’s a custom font curse that floats around and zaps me????

Thanks!
Dina

[Tom]

Did you end up sending me temporary login details? Any chance you can re-send them?: https://generatepress.com/contact

Let me know 🙂

[dgainesj]

Thank you!
Dina

[Tom]

In your Code Snippet, try replacing all of the ’ characters with '.

See how one is curly and the other is straight? I believe that’s the issue.

Alternatively, just replace the function with this:

add_filter( 'generate_typography_default_fonts', 'tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
    $fonts[] = 'Vilna';
    return $fonts;
}

[dgainesj]

It works now thank you thank you thank you!

For the life of me I wouldn’t have been able to see that!

You are seriously the best.

[Tom]

Glad I could help! 🙂

[Daniel]

Hello My friends
When I use the method in this article (https://docs.generatepress.com/article/adding-local-fonts/), Custom fonts are added to customizer settings. Everything is OK.
But
Could you please give me a function that I can add it to child-theme functions.php so that my custom fonts would also be seen in Elementor typography options?? Is it possible??
Thanks a lot

[Tom]

Hi there,

I’m not sure what filter would be required to add them to Elementor. You may need to check with their support.

[Author]

Posts