One of the most frequent requests on my themes is how to add new fonts to the options panel. I decided to spend some hours with this and I developed a simple plugin. You can grab it here.
For now this plugin works only with themes developed by me. If you don’t know where to find them, here they are.
You can add 3 types of fonts: from the Google Font directory, hosted on your server and safe system fonts. Each one has a different method so let’s check how it can be done:
- Fonts from the Google Directory: on http://www.google.com/fonts select a font and simply add the link href value and font CSS to the plugin option when you are adding a font.
- Self hosted fonts: you can also pick a custom font and generate a webfont kit that works across all browsers. Then upload that folder to your server and, again, fill in the link href and font CSS values on the add new font plugin options panel. Here’s a good website for generating these fonts (you’ll find more info about the process there): http://www.fontsquirrel.com/tools/webfont-generator.
- Websafe/system fonts: these fonts that are considered safe to use, because they are available by default on most machines. In this case you don’t need to fill any font href link, because it should be already available on your machine. Here’s a good list of these fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp.
I have set up a small video to help you and you can check it just above this text. If you still need help please head to https://support.pirenko.com/ and I will be glad to assist you.
Hello Pirenko,
I am experiencing some issues while I try to add a new font with your extra font plug in.
I would like to import this font http://www.fonts101.com/fonts/view/Brandname/14992/Pegasus, into the samba theme.
I have uploaded the four font types which came out from fontsquirrel.com download, into my public_html/fonts/pegasus folder alongside with the stylesheet.css.
When I set the URL link for the stylesheet.css in the extra font plugin, it accepts it and confirms the success of the operation.
Unfortunately when I adjust and save the font type in the samba options (the pegasus entry is there in the drop down menu for font selection), the new text font in the website is different than the intended one.
I have tried different configurations in the stylusheet.css, as adding the url path location for different font formats, but with no success. Can you please detail me how to do it. I would highly appreciate it.
Thank you in advance
Vitor
Hi,
Please send me a message through my profile page on themeforest – http://themeforest.net/user/Pirenko – and we\’ll take it from there.
Cheers!
Is there anyway to preview the fonts that come loaded into the themes? I am looking for a script font, and don\’t know how to find one in the list of names, other than to Google them one-by-one.
Hi,
At the admin panel with this plugin it is not possible. If you are using Google Chrome you can try and install a cool extension for that: https://chrome.google.com/webstore/detail/google-font-previewer-for/engndlnldodigdjamndkplafgmkkencc
Cheers!
OK I am trying to do this, but the font is not showing up in the menu, I\’m not sure what I\’m doing wrong, I may have it in the wrong file path or something.
Here is the file path as showing in FTP – /dfemmes.com/wp/wp-content/themes/samba/inc/fonts/PoorRichard/stylesheet
Hi,
Sorry, but if you want to get support we must validate your purchase. Please send me a message through my profile page on themeforest: http://themeforest.net/user/Pirenko
Thanks!
I have a website, but how do I replace my font which is currently roboto-light with something else, and how do I ensure that it is done for all of other files? I\’m a coding idiot and have outsourced my web design.
Hi,
This plugin only works with my themes like stated above. If you are having trouble with one of my themes please send me a message through my profile page on themeforest: http://themeforest.net/user/Pirenko
Thanks!
Hi, there I checked this Extra Fonts Plugin this is very helpful for me.
Thanks, Pirenko