-
Posts
-
Hi Guys,
I know this is a question often asked and it not specifically an enfold issue, but there are so many posts here in the forum about installing Fonts and it is confusing.
I have a basic Windows .tff font (chalkduster). I used Font Squirrel to convert it (saw the suggestion in another forum topic).
I now have a .woff and a .woff2 as well as a stylesheet.css file as a result.
Q: What do I need to do to get them working on my site?
Q: Do I still need the .tff file also?
Q: Where do I upload the files (and which ones? I understand .woff2 may not support all previous browser versions?)
Q: Do I enable websafe fallback in the enfold Theme settings?
*: I have a child theme installed.
*. I know how to .FTPThe css file downloaded with the Font Squirrel conversion has the following code:
@font-face { font-family: 'chalkdusterregular'; src: url('chalkduster_0-webfont.woff2') format('woff2'), url('chalkduster_0-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }Q: After enabling the font, how do I make it selectable through the Enfold interface? e.g. To set H1 or H2
Again, sorry but I know this is covered already in the forum, but there are no ‘tutorials’ or step by step instructions specific to Enfold that I can find.
I hope you can assist.
Many thanks in advance,
HHey Heathcliffe,
Please refer to this link http://wpsites.net/web-design/fonts-wordpress/
or if you like to add a single font an alternate solution is to use a plugin like https://wordpress.org/plugins/use-any-font/
Best regards,
VinayHey @Vinay,
Thanks for this. It is very helpful. In this demo it modifies the child theme H1 (as an example) to use the new installed font.
Of course, I have a blank child CSS file. If I install the font will it become available through the Enfold Theme Interface? (so I don’t have to add all the font settings in the child theme) ?That is what I really want to do. Find a new font, install it, and for it to be available in the drop down list in the Enfold (Child) Theme | General Styling | Fonts | Header drop down list.
H
Hi,
If the fonts are on google.com/fonts you can add them to enfold list using a function.
add_filter( 'avf_google_heading_font', 'avia_add_heading_font'); function avia_add_heading_font($fonts) { $fonts['Alef'] = 'Alef'; return $fonts; } add_filter( 'avf_google_content_font', 'avia_add_content_font'); function avia_add_content_font($fonts) { $fonts['Alef'] = 'Alef'; return $fonts; }If it is a custom self hosted font it will not appear in enfold settings. You have to upload the fonts to your server and add font styles using custom css like
h1 { font-family: ‘custom-font’; }An alternate solution is to use the plugin and the plugin allows you to select the html tags and assign the font styles.
Hope i answered your question.
Best regards,
VinayHi,
if you like to add a single font an alternate solution is to use a plugin like https://wordpress.org/plugins/use-any-font/
You can also search the wordpress plugin directory for more https://wordpress.org/plugins/search.php?type=term&q=font
Best regards,
VinayHi Vinay,
Thank you for all your help. Unfortunately the font did not work. I presume it is a conversion problem as I tried both the plugin and manually. Neither worked. The font was chalkduster.tff
I’m sure this post will be useful for others, and myself on future website. Thanks.
H
I have used with success the plugin ‘Easy Google Fonts’ and it works very well for me. There may be a similar font you could use.
Hi,
@Heathcliffe: Where did you put the font files? Use the absolute url or directory in the font-face code:@font-face { font-family: 'chalkdusterregular'; src: url('directoryhere/chalkduster_0-webfont.woff2') format('woff2'), url('directoryhere/chalkduster_0-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@schoolofmakeup: Thanks for sharing. :)Best regards,
Ismael@schoolofmakeup: thanks for that. I will have a look.
@Ismael: I put the font files in the child theme/fonts and I also put them in the mail theme root and yes, I used the full directory. I know it was looking in the right place (after I had changed my child theme H1,H2 etc, as the fonts did change (back to a default one).I assume because the Use Any Font plugin would not display it – the font is incompatible to be converted. I just gave up lol.
Hi,
What is the absolute url or directory? Please post the login details here so that we can check the settings.
Best regards,
IsmaelHi Guys,
Thanks for your help with the above. I found an alternative font, “fingerpaint” but the client would really like chalkduster font used. But I can not get it to work at all. I wonder if you could take a look at the back end?
I’ll provide Admin Login to the site, and FTP too if you wouldn’t mind taking a look for me?
If you can get H1 to be chalkduster that would be fantastic. H1 is used on the About | Menu | Contact Us and News headers. Right now it is showing a plain font, because it is not finding the Chalkduster one.
I even downloaded the Chalkduster webfont from GitHub but still did not work.
Really hope you can help with this.
Many thanks,
HHey guys,
I’ve never bumped a support issue before, but it is a little frustrating seeing you immediately reply to other issues that are coming in. (and I accept I have been fortunate to benefit from your speedy, excellent support in this way). I’m away from the office for a few days and it would be good to know, you at least understand my issue and that you can indeed login to the site and FTP and perhaps take a look whilst I am away?
Thanks again, and sorry for the bump. I will remain patient :D and thanks for 3.8 :D
Hi,
I edited your .htaccess file and applied this changes – http://kriesi.at/documentation/enfold/enable-cors/
Please review your website now and check h1 tagged elements.Best regards,
Yigit@Yidit
You’re awesome, I would never have found that one. Thank you so much for quick response. I will take a look changing the site to use the font where required on my return.
Have a great weekend !
- The topic ‘Step by Step Installing a New Font’ is closed to new replies.