-
Posts
-
Hi,
I have added the font ‘Akkurat’ to my website. But it does not work. That’s the steps I did:
(1) Upload an otf.-file to child-theme folder child/fonts/akkurat/akkurat.otf
(2) Add @font-face to CSS:@font-face { font-family: 'Akkurat'; src: url('/wp/wp-content/themes/child-theme/fonts/akkurat/akkurat.otf') format(opentype'); font-weight: normal; font-style:normal; }(3) Add PHP-Code to functions.php in Child-Theme:
/* FUNC: Add Font to ENFOLD-Theme */ add_filter( 'avf_google_heading_font', 'avia_add_heading_font'); function avia_add_heading_font($fonts) { $fonts['Akkurat'] = 'Akkurat:400,700'; return $fonts; } add_filter( 'avf_google_content_font', 'avia_add_content_font'); function avia_add_content_font($fonts) { $fonts['Akkurat'] = 'Akkurat:400,700'; return $fonts; } add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' ); function wpex_mce_google_fonts_array( $initArray ) { $initArray['font_formats'] = 'Akkurat=Akkurat,arial,sans-serif;Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'; $theme_advanced_fonts = 'Akkurat=Akkurat,arial,sans-serif;'; $initArray['font_formats'] = $theme_advanced_fonts; return $initArray; }Any idea what’s wrong here?
Hey Marcel,
Please remove the code from functions.php file and add following custom CSS
body p { font-family: 'Akkurat'; }Best regards,
YigitHi Yigit,
I’m not sure what you mean. When I remove the code from funtions.php I am not able to use the font in theme settings. Furthermore the problem is alway the same, the font is not shown.
Actually this is my custom css:
@font-face { font-family: 'Akkurat'; src: url('/wp/wp-content/themes/child-theme/fonts/akkurat/akkurat.otf') format(opentype'); font-weight: normal; font-style:normal; } body p { font-family: 'Akkurat'; }Hi,
That code you used in functions.php is for Google fonts not for custom fonts, so not needed.
To which elements would you like to apply this font?
Also, if you do not mind, please create a temporary admin login and post it here privately.Best regards,
YigitH Yigit.
thanks for your explanation. So I do not need the first both filters as well? It woul be great to change the font in Enfold settings, as I did in some of my other Enfold websites (theire I usere Google fonts with the code above in functions.php).
The font ‘Akkurat’ should be aplly to all the text elements.
I’ve created an admina account for you. Please see private Content.
Hi,
Please see – http://justcreative.com/2013/01/22/how-to-use-custom-fonts-with-font-face-on-wordpress/
If you need further assistance, please post FTP logins here privately as well. In that case, if font is not a free one, please post it too (or you can upload it on your server)
Best regards,
YigitHi Yigit,
you can find the FTP logins as private content.
You can find the font in the folder: /wp/wp-content/themes/child-theme/fonts/akkurat/akkurat.otf
Hope you can find the reason why the font is not loaded.
Thanks,
MarcelHi,
Please check the font files inside your-child-theme/fonts folder. I uploaded those and then adjusted custom CSS to target the correct path :)
Let us know if you have any other questions or issues!Best regards,
YigitOk, thanks :)
Do you still know from which website you’ve downloaded the other akkurat-font-files?
Best,
MarcelHi,
I generated @font-face using this website – http://transfonter.org/. I used the same file you used but you forgot to create @font-face
Best regards,
YigitHello
I want to change the Font to Tahoma, but when I use the above instructions nothing happens. I don’t know, if Tahoma actually needs a @font-face, but when I created and added it to custom CSS, nothing happened.
In a similar Topic on this forum (https://kriesi.at/support/topic/font-tahoma/) a moderator named BASILIS recommended to the user, to include * { font-family: Tahoma; } in CSS, but where exactly does he mean to include that code (which CSS file, which line)?
Can you please help me and explain how to include tahoma, so I can choose the font in the Enfold general styling menu?
Thank you very much
Hi knuppsli,
You can try to add your CSS in Quick CSS under Enfold->General Styling to see if it works.
Best regards,
Rikard——————————————————————————————————————————————–
UPDATE: 17.12.2017Thank you Yigit! It worked.
——————————————————————————————————————————————–
Hello RikardQuick CSS didnt help. first I tried this:
* { font-family: Tahoma; }
———————————————-
Because the first did not work, I tried this:@font-face {
font-family: ‘Tahoma’;
src: url(‘fonts/Tahoma-Bold.woff2’) format(‘woff2’),
url(‘fonts/Tahoma-Bold.woff’) format(‘woff’),
url(‘/fonts/Tahoma-Bold.ttf’) format(‘truetype’);
font-weight: bold;
font-style: normal;
}@font-face {
font-family: ‘Tahoma’;
src: url(‘fonts/Tahoma.woff2’) format(‘woff2’),
url(‘fonts/Tahoma.woff’) format(‘woff’),
url(‘fonts/Tahoma.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;———————————
Nothing.
Can you please answer my question from yesterday, IF Tahoma actually needs a @fontface and what exactly I was doing wrong. Where do I have to add the @font-face in the CSS code (which line exactly and is it the base.css file or what)?
I would really like to actually learn something and relieve you guys from support.
Thanks for your help
knuppsli
Hi,
Following code should have worked
body, body * { font-family: Tahoma !important; }Please flush browser cache and refresh your page a few times.
If that does not help, please start a new thread under Enfold sub forum and attach temporary admin logins in private content field.
Best regards,
Yigit
- The topic ‘Adding new font to my website does not work’ is closed to new replies.