Custom Font Uploader for WordPress Themes
163Update (10th July 2010): Pippin has now converted this into a premium plugin which can be purchased from Code Canyon. If you’re not afraid to mess with your code a little though, read on for the DIY method!
WordPress theme option panels were a tremendous stride in the world of theme development; they gave site owner’s the ability to modify various aspects of their site, without ever having to touch the code. Every great theme either has or should have an extensive options panel.
In this tutorial, I’m going to demonstrate how to add a custom font uploader to your options panel. This will allow site owners to upload any number of font files and apply them to different sections of the site.
As a designer, I cringe a little at the thought of clients possibly screwing up my carefully selected fonts with their own haphazard selection, but, in the end, it’s what the client wants.
Before Starting
To begin, you first need to create your options panel. For this task, I recommend you follow Rohan Mehta‘s tutorial over on Net Tuts. It’s the best tutorial I’ve found on this topic and will provide you with almost everything you need for this tutorial.
#1 – The Essentials
The first thing we need to do is create a folder called fonts in our theme directory. Your Structure should look like this:
- wp-content
- themes
- your_theme_folder
- fonts
For security reasons, set the permissions of this folder to 774. This will allow the server to read, execute and write, while disallowing any public write / execute privileges.
You will also need to ensure you have a functions.php file, which, of course, you do because you’ve already followed the Net Tuts tutorial, or created an options page of your own ;-)
#2 – The Upload Script
In order to actually upload files, such as custom fonts, we need to create a php upload script.
Save this as upload.php in your theme folder (the same place we created the uploads folder):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | <?php //include internal wordpress functions require($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php'); //define a maxim size for the uploaded files define ("MAX_SIZE","20000000"); //This function reads the extension of the file. It is used to determine if the file is an font by checking the extension. function getExtension($str) { $parts = explode('.', $str); return end($parts); } //This variable is used as a flag. The value is initialized with 0 (meaning no error found) //and it will be changed to 1 if an errro occures. //If the error occures the file will not be uploaded. $errors=0; //checks if the form has been submitted if(isset($_POST['Submit'])) { //reads the name of the file the user submitted for uploading $font=$_FILES['font']['name']; //if it is not empty if ($font) { //get the original name of the file from the clients machine $filename = stripslashes($_FILES['font']['name']); //get the extension of the file in a lower case format $extension = getExtension($filename); $extension = strtolower($extension); //if it is not a known extension, we will suppose it is an error and will not upload the file, //we will only allow .ttf and .otf file extensions //otherwise we will do more tests if (($extension != "ttf") && ($extension != "otf")) { //print error message echo '<h1>Unknown extension!</h1>'; $errors=1; } else { //check the mimetypes against an allowed list $mime = array ("application/x-font-ttf", "application/vnd.oasis.opendocument.forumla-template", "application/octet-stream"); if (!in_array($_FILES['font']['type'],$mime)) { echo '<h1>Unknown mimetype!</h1>'; $errors=1; } //get the size of the file in bytes //$_FILES['image']['tmp_name'] is the temporary filename of the file //in which the uploaded file was stored on the server $size=filesize($_FILES['font']['tmp_name']); //compare the size with the maxim size we defined and print error if bigger if ($size > MAX_SIZE) { echo '<h1>You have exceeded the size limit!</h1>'; $errors=1; } //keep the original file name $font_name=$filename; if (!$errors) { //the new name will be containing the full path where fonts will be stored (fonts folder) $newname="fonts/".$font_name; //we verify if the image has been uploaded, and print error instead $copied = copy($_FILES['font']['tmp_name'], $newname); if (!$copied) { echo '<h1>Copy unsuccessfull!</h1>'; $errors=1; } } } } //If no errors registred, redirect back to the theme options panel if(isset($_POST['Submit']) && !$errors) { $url = get_bloginfo('url') . '/wp-admin/admin.php?page=functions.php'; header ("Location: $url"); } } ?> |
For explanations of how this script works, read the embedded comments.
#3 – Embed the Upload Script
We now need to create the upload form in our options panel that will allow us to actually upload font files to the server.
Place this in your functions.php:
1 2 3 4 5 6 7 8 9 10 11 | <h2>Upload Fonts</h2> <p><em>Filetypes accepted: <strong>.ttf</strong> and <strong>.otf</strong></em></p> <p>Uploaded fonts will appear in the <strong>FONTS</strong> menu below</p> <form name="newad" method="post" enctype="multipart/form-data" action="<?php bloginfo('template_directory');?>/upload.php"> <table> <tr> <td><input type="file" name="font"></td> <td><input name="Submit" type="submit" value="Upload"></td> </tr> </table> </form> |
This code provides an interface to the upload.php that we created earlier, and it looks like this:
Important! In the Net Tuts tutorial, you created a section in functions.php that displays the theme options in a table based layout. The above code should be placed like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <div class="wrap rm_wrap"> <h2><?php echo $themename; ?> Settings</h2> <div class="rm_opts"> //upload form begins here <h2>Upload Fonts</h2> <p><em>Filetypes accepted: <strong>.ttf</strong> and <strong>.otf</strong></em></p> <p>Uploaded fonts will appear in the <strong>FONTS</strong> menu below</p> <form name="newad" method="post" enctype="multipart/form-data" action="<?php bloginfo('template_directory');?>/upload.php"> <table> <tr> <td><input type="file" name="font"></td> <td><input name="Submit" type="submit" value="Upload"></td> </tr> </table> </form> //upload form ends here <form method="post"> <?php foreach ($options as $value): switch ( $value['type'] ): case "open": break; case "close": ?> . . . |
If you do not place the upload form in the correct area, it will not show up in your theme options panel.
#4 – List the Available Fonts
We have created the ability to upload fonts and store them in a folder called fonts. Now we are going to create a function to list all of the available fonts inside our theme options panel.
Place this code in your functions.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $fontsList = array(); $fontDirectoryURL = $_SERVER['DOCUMENT_ROOT'] . get_bloginfo('template_directory') . '/fonts'; $removeSiteURL = get_bloginfo('url'); $fontDirectoryPath = str_replace($removeSiteURL, "", $fontDirectoryURL); $fontURL = get_bloginfo('template_directory') . '/fonts'; $fontDir = opendir($fontDirectoryPath); while(($font = readdir($fontDir)) !== false) { if($font != '.' && $font != '..' && !is_file($font) && $font != '.htaccess' && $font != 'resource.frk' && !eregi('^Icon',$font)) { $fontList[] = $fontURL."/".$font; } } closedir($fontDir); array_unshift($fontList, "Choose a font"); |
just after
1 2 | $themename = "Theme-Name"; $shortname = "sn"; |
These two lines are created in the Net Tuts article.
This is a function that works like this:
- create a url that will be used to access the font files in the CSS
- open the font directory
- read all files contained in the directory
- exclude certain file names and directories
- place all fonts found inside a list
#5 – Create the Font Options
Anywhere among the rest of your theme options created in the Net Tuts article, place this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | array( "name" => "Fonts", "type" => "section"), array( "type" => "open"), array( "name" => "Headers", "desc" => "Choose a font", "id" => $shortname."_header_font", "type" => "select", "options" => $fontList), array( "name" => "Navigation", "desc" => "Choose a font", "id" => $shortname."_nav_font", "type" => "select", "options" => $fontList), array( "name" => "Main Body", "desc" => "Choose a font", "id" => $shortname."_body_font", "type" => "select", "options" => $fontList), array( "name" => "Footer", "desc" => "Choose a font", "id" => $shortname."_footer_font", "type" => "select", "options" => $fontList), array( "type" => "close"), |
#6 – The CSS Part One
We’re going to include the fonts in our header.php file so that we can apply them to the web elements.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <style type="text/css" media="screen"> @font-face { font-family: "header-font"; src: url("<?php echo get_option('sn_header_font'); ?>"); } @font-face { font-family: "nav-font"; src: url("<?php echo get_option('sn_nav_font'); ?>"); } @font-face { font-family: "body-font"; src: url("<?php echo get_option('sn_body_font'); ?>"); } @font-face { font-family: "footer-font"; src: url("<?php echo get_option('sn_footer_font'); ?>"); } </style> |
Important! Do not forget to replace sn with your own theme’s short name.
#6 – The CSS Part Two
In your style.css file:
1 2 3 4 5 6 7 8 9 10 11 12 | h1,h2,h3,h4,h5,h6,h7 { font-family: "header-font"; } p { font-family: "body-font"; } .navigation { font-family: "nav-font"; } #footer p { font-family: "footer-font"; } |
That’s it! Your final outcome should look similar to this (unless you used your own theme options page rather than following Net Tuts’):
#7 – Going Further
The system we’ve created works very well and is significantly better than any wordpress font plugin I’ve been able to find. Here are some suggestions for going a little further and making it even better:
- Add jQuery and or Ajax to the upload form to prevent reloading of the page and to create cleaner error / success messages
- Create options for more specific site elements, such as p tags with a class of “antique”, rather than just generic elements as I’ve done above.
- Allow more font file types by adding their mime types and extensions to upload.php
Enjoy this post? You should follow me on Twitter!
Great post there Pippin. Posts like these are why I love this site.
This is a function that works like this:
create a url that will be used to access the font files in the CSS
Really great post thank you!
amazing css. thanks for share with us
WoW! Heckova post!
I’m sure it’s easier than it looks (your lessons usually are, thankfully) but I might have to just call @FontSiteDiva (Joyce, at FontSite.com) for any future specialty font/WP stuff — come to think of it, a lot of folks I know on Twitter would like to see your post — think I’ll go tell them about it now ~
Thanks!
Great css tutorial, thank you.
Hey really great tutorial on creating a font options page.
Great work friend.Why don’t you create a plugin for it?
Thanks, Kishore. I’ve definitely thought about it.
Awesome Result but little hard implementation !! A plugin would be better. BTW trying your theme Sugar Glider now !!
A plugin would be better for the everyday user, but is not great for theme developers who wish to embed this functionality into their themes. Hopefully a plugin will come sometime soon.
Thanks for the plugin, helped me a lot
Thank a lot for it, good job, This post really help me
Yes, reat css article, keep it up.
This very cool, a plug-in would be awsome, but either way great tutorial
I’m working on making it into a plugin right now :)
Great be sure to let us know when it’s done.
OMG You nailed it! Yah but a plugin would be sweeter.
@Pippin are you sharing it after you made it into a plugin?
Yes, it will be shared.
Awesome. I’ll look forward to it. You’re the best! :)
This is awesome!! Looking forward to seeing a plugin!
Thanks.
This is a great article! I am in the process of trying to broaden my WordPress knowledge to help expand my skills further so this was a really nice find for me. Thanks for sharing. This is my first visit to your site and it looks great. Nice work.
Also, any tutorial from here is very informative.
Hey guys, the plugin is ready and available as a free download from my site: http://pippinspages.com/freebies/wordpress-font-uploader-plugin/
Let me know what you think
thanks bro,
thanks for the plugin i download it.
Wow thanks. You really are the best. :)
Oh no… I just realized I cant download the plugin anymore :(
It will be available on Code Canyon any day.
This is great, I pretty well enjoyed expanding my theme….now to implement the options from my new admin menu! I do have a question… is there a way to display just the font name in the dropdown in the admin menu? Currently it displays the entire path, and as I’m in a subdirectory, with a long theme name….. even if I expand my dropdown boxes to 500px, the font name gets cut off making font selection nearly impossible. Appreciate any input, and definitely appreciate the tutorial!
Glad you enjoyed it! The font name display is one of the polishing features I’m still working on.
Oh Cool! I rearranged the css to get giant boxes for now to see the names. I’ll look forward to see if/when you come up with a solution! Thanks again!
nice post.can you create wp plugin for this ? ;)
I’ve already done this. You can preview it over on my site: http://pippinspages.com/freebies/wordpress-font-uploader-plugin/
This will definitely come in handy when I create blogs or CMS for clients. I will have to download the plugin and give it a try. Thanks!
Wow this post is INSANE. Not only is it really useful but everything is pretty much done. Just copy and paste :) Really great for client sites or WP theme development…Thanks a lot for this one.
Glad you liked is WPExplorer. Let me know if you use it and how it works out for you.
This is a very useful plugin for WP. Much easier to use for those who don’t know programming
mmm…. cool. A plugin would be better
Great post but I appreciate the promptitude in creating a plugin, at visitors’ request. Good job Pippin!
Interesting… I am going to try it right now
I kind of went wild with this one…. added about 20 places fonts can be switched out on my site. Mostly just for fun, but I think one of the coolest options, typographically speaking (if the power is used for good, not evil) is adding an option to change the leading letter size and font. That’s plain fun!
With the plugin version, I’ve included options for defining the exact elements which are to have their fonts changed. This could easily be expanded to include font sizes as well.
Nice – I’ve been waiting to see someone teach people on this! I just started using cufon on some of my sites recently, I just love the fact we can all use the best looking fonts rather than boring Arial!
good post buddy.
Fantastic article. It really takes me back to the origins of websites and makes me remember what is most important. The content. Thanks so much for the post. now i am going to try this .Once again thanks to your inspiration.
Great I like this
I use WordPress for my waterfront property websites in Venice, FL. I didn’t know this was out there. I like it!
It wasn’t . . . until now ;)
The plugin is now available over at Code Canyon: WordPress Font Uploader
Thank you for the post! I will see which font will look best on my blog now!
thanks for the wonderful tut and the plugin (better option) would be great to overcome out this tut.
Well i’m using thesis theme and it already provides lots of font options so it makes my blog with a pluginless in this manner
I like your blog,it’s cool!
Awesome post. But I feel the implementation will be little difficult. But anyway I am going to try it. You can make this coding into a plugin. Everyone will like this.
It already is a plugin available at codecanyon.net
It might be worth pointing out that you would need to own the licence for the fonts you choose to upload, technically.
Thanks for this great post. Will definitely help alot of people who want their blogs to by Typo-Graphically strong =)
Cool Info, plugin would be great but i’m knowledgable enough to work this – but those who are may find very difficult….
Cheers
John
Regis, if you read the comments above, you’ll see that I’ve already made a plugin for this. It is a premium plugin available from Code Canyon.net. Read more about it here.
I wonder, is there a worry in 3 years time when you can choose whatever font you want for your site – quickly and easily – that suddenly we’ll lose that ‘uniformity’ that we have at the minute with Arial, and people browsing for information will suddenly feel like that trawling through treacle as every site they visit looks completely different to the next in every way. (Think iphone apps – more or less all of them use Helvetica, and a uniform navigation system too).
This is one of the potential consequences of allowing people to choose all of their own fonts. With this sort of functionality, there will always be cases where sites will distract their readers due to their fonts, but probably not for the majority. As I said at the top of the tutorial:
“As a designer, I cringe a little at the thought of clients possibly screwing up my carefully selected fonts with their own haphazard selection, but, in the end, it’s what the client wants.”
I love what you’ve shared here and I’ve tweaked it a bit to work exactly how I want… thanks for the great share and you are indeed a WP Guru!
For the benefit of all, would you care to share the improvements you’ve made? :)
I prefer to have the Pippin plugin. Too much codes for me. Overwhelming haha. Great work Pippin!.
Someone has to do it ;) Thanks!
Hello there, the article is is very nice, waiting for the wp pluggin
The plugin is available now. There is a link at the top of the tutorial.
Thank you for the post! I will see which font will look best on my blog now!
Thank you for the helpful post. I definitely use it for my blog and i think it better by old one.
Wow, great work. I should try tonight
Thanks for the info. I will give it a try even though it might take me a while to implement.
If you have trouble, feel free to contact me through my site, and the plugin (which has more features than this now) is also available from the the link at the top of this page. It’s a on-click implementation ;)
Thanks you for this information i see a few new tips for me.
thanks for the plugin,
asking permission to use it with thanks…
How do you intend to use it? Are you referring to redistributing the premium plugin or sharing the tutorial on another site?
uppsss….seems that the plugin are not free… (cmiiw)
Grat post
Thanks a lot
Thanks Pippin for this useful post , I was looking for this to add to my blog theme
Regards
Anderson
it’s very helpful post for me, thanks to you!
Great article,. thanks for sharing.
I agree, great article!
but will the user browser show proper fonts , in their pc
I’m not entirely sure I fully understand your question. Are you asking whether the user is able to see the font name in the administrative interface?
Just out of curiosity and because I’ve heard several different interpretations of how this works … won’t there be some kind of potential copyright issue if you upload rights managed fonts to your site?
As long as you have purchased the font or it is a free to use font, there should be no copyright issues. This only allows you to upload files for use on your site; it does not make the files downloadable.
no , i mean , will the visitor be able to see the font , if its not supported by their browser , just like we see diff fonts in Firefox ,and the same font in IE .
With the code I have provided in this tutorial, no. The fonts will show up in all modern browsers except Internet Explorer. This is because IE only support .eot font formats, and I did not include a section for those in this code.
However, the plugin available from Code Canyon now has full support for fonts in IE 6, 7, and 8.
With the code I have provided in this tutorial, no. The fonts will show up in all modern browsers except Internet Explorer.
I usually do go through the spam filter, so even the simple fact you have a Gravatar
Hey really great tutorial on creating a font options page.
Great work friend Keep it up…….
Hi!
Thanx for this great plugin, but I got some problems on changing the font size!
How can I do it?
Thanx for suggets
Do you want to be able to make the font size selectable, like the different fonts are, or do you just want to set a certain size for each font?
Thanx for your reply!
I don’t want to make the font size selectable by users.
Only I need to have bigger fonts inside the pages, because the texts of my site are very little using the plugin. How can i change it?
If I try changing the style.css of the wordpress theme nothing changes…. :-(
Thanks for your help Pippin! I just bought your last plugin the 1.3 version.
In step #6, add a line to the style sheet:
font-size: 16px;
And change 16px to whatever size you want. If it doesn’t apply, then do this:
font-size: 16px!important;
That’s a piece of screen of the site using “Nuptial” as font.
Thanx for your suggestions
http://img705.imageshack.us/img705/9518/screenxl.jpg
There is something I didn’t understand should I change the css file inside your plugin font uploader or should i change the style.css of the wordpress theme?
Sorry for my noobish
Change it inside the plugin folder.
It doesn’t work yet :-(
Dont know what am I missing….
This is the fontFunction.css form the plugin… please what am I doing wrong?
[CODE]
@font-face {
font-family: “nuptial”;
src: url(‘../fonts/nuptial.ttf’);
font-size: 16px!important;
}
.fu_wrap{
width:800px;
position: relative;
font-size: 16px!important;
}
.fu_section{
border:1px solid #ddd;
border-bottom:0;
background:#f9f9f9;
width: 630px;
font-size: 16px!important;
}
h1,h2,h3,h4,h5,h6,h7 {
font-family: “header-font”;
font-size: 16px!important;
}
p {
font-family: “body-font”;
font-size: 16px!important;
}
.navigation {
font-family: “nav-font”;
font-size: 16px!important;
}
#footer p {
font-family: “footer-font”;
font-size: 16px!important;
}
.fu_opts label{
font-size:12px;
font-weight:700;
width:200px;
display:block;
float:left;
font-size: 16px!important;
}
.fu_input {
padding:30px 10px;
border-bottom:1px solid #ddd;
border-top:1px solid #fff;
font-size: 16px!important;
}
.fu_input label {
display: block;
margin-bottom: 10px;
font-size: 16px!important;
}
.fu_opts small{
display:block;
float:right;
width:200px;
color:#999;
}
.fu_opts input[type=”text”], .fu_opts select{
width:280px;
font-size:12px;
padding:4px;
color:#fff;
line-height:1em;
background:#f3f3f3;
font-size: 16px!important;
}
.fu_input input:focus, .fu_input textarea:focus{
background:#fff;
}
.fu_input textarea{
height:100px;
padding:4px;
color:#333;
line-height:1.5em;
background:#f3f3f3;
font-size: 16px!important;
}
.fu_title h3 {
cursor:pointer;
font-size:1em;
text-transform: uppercase;
margin:0;
font-weight:bold;
color:#232323;
float:left;
width:80%;
padding:14px 4px;
}
.fu_title{
cursor:pointer;
border-bottom:1px solid #ddd;
background:#eee;
padding:0;
}
.fu_title h3 img.inactive{
margin:-8px 10px 0 2px;
width:32px;
height:32px;
background:url(‘images/pointer.png’) no-repeat 0 0;
float:left;
-moz-border-radius:6px;
}
.fu_title h3 img.active{
margin:-8px 10px 0 2px;
width:32px;
height:32px;
background:url(‘images/pointer.png’) no-repeat 0 -32px;
float:left;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
.fu_title h3:hover img{
background:url(‘images/pointer_over.png’) no-repeat 0 0;
}
.fu_title h3:hover img.active{
background:url(‘images/pointer_over.png’) no-repeat 0 -32px;
}
.fu_title span.submit{
display:block;
float:right;
margin:0;
padding:0;
top: 0;
width:15%;
padding:14px 0;
}
.clearfix{
clear:both;
}
.clear:after {
display: block;
visibility: hidden;
content: “.”;
clear: both;
}
.fu_table th, .fu_table td{
border:1px solid #bbb;
padding:10px;
text-align:center;
}
.fu_table th, .fu_table td.feature{
border-color:#888;
}
.fu_upload {
background: #1E5EBD;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33c91c), to(#238a13));
background: -moz-linear-gradient(19% 75% 90deg,#0D0D52, #1E5EBD);
border-color: #134285;
width: 94px;
padding: 5px;
color: #fff!important;
text-align: center;
margin: 10px 0;
border: 1px solid #ccc!important;
}
.fu_upload:hover {
border-color: #c0c0c0;
color:#f0f0f0!important;
cursor: pointer;
background: #238a13;
}
.credits {
width: 200px;
position: absolute;
left: 650px;
background: #f0f0f0;
border: 1px solid #ccc;
padding: 0 10px 10px 10px;
}
.google_font_url, .fu_font_list {
width: 100%;
}
[/CODE]
It changes only the admin panels fonts making them bigger, but not the general fonts of the site. It would be great if you could add the size of the fonts in your plugin update. Thanx
I need your help please I cannot solve this problem
You didn’t follow what I said to do.
The code that I gave you needs to be put in the same place and file as step #6 part two in the above tutorial, not in the fontFunctions.css file.
you could do that with css – or rather control it.
Something along the lines of font-size: 10px;
I tried put the #6 part two code into my wordpress style.css and also I copied this style.css into font uploader root of plugin folder…
still cannot solve. Am I wrong again? I’m going crazy
h1,h2,h3,h4,h5,h6,h7 {
font-family: “header-font”;
font-size: 16px!important;
}
p {
font-family: “body-font”;
font-size: 16px!important;
}
.navigation {
font-family: “nav-font”;
font-size: 16px!important;
}
#footer p {
font-family: “footer-font”;
font-size: 16px!important;
}
Can you post a link to your site and tell me exactly which font you’re trying to resize?
Here it is: http://www.trattorialafenice.net/ the font I would like to use is “Nuptial” here it is: http://www.fonts101.com/fonts/view/Serif/20280/Nuptial_Script.aspx
I noticed also that in Iexplorer 8 the font doesn’t show! even if I use font uploader 1.3
Instead in safari and firefox I can see the font correctly but the size of the font in the page cannot be read (it is too small).
Thanx for precious help
Ok, a couple of things. First of all, the fonts do not show up in Internet explorer because IE requires the font files be in a special IE only format. You have tried using the regular .ttf font formats. This will not work. The readme that comes with the plugin covers exactly how to convert your font files to an IE acceptable format.
Please read the readme, it is there for a reason.
Second, as you are using the plugin from Code Canyon, which has largely different code that the tutorial above, I ask that we continue this over at Pippin’s Pages if you have any further questions related to this issue.
To solve your problem, I will provide you with very specific pieces of code, but as they are lengthy, I will not post them here. Email me at pippin@pippinspages.com and I will send them over.
Thanx for your help Pippin!
hope to see updates for this great plugin!
Thanks for sharing the tutorial. I had seen people asking about this in a couple forums, so it is glad to have a resource explaining how to do it.
I’m trying to get the plug-in but I seem to be going around in circles without ever downloading the actual plug-in? Maybe I just missed the link. I also got trapped in the pages and couldn’t hit the back arrow to this site, fortunately I had it bookmarked. Looking forward to trying this out…
The plugin is available at Code Canyon
Thanks Pippin for this post and working link to this plugin.
This is a wonderful tweak Pippin. Thanks for sharing your code to us. Now I can make my own Font Uploader Plugin using your code.
Cheers.
My site has a little problem, like that
Amazing!!!!!!! thanks for sharing.
this is a great post and thank you for sharing this nice experience,and hope you can give another posts as soon as possible.
Nice post and stuff! :) Thnx for sharing mate..
this is a great article, most blogs are wordpress
Great article indeed. Thanks for sharing with us.most blogs are wordpress
Hi!
Thanx for this great plugin, but I got some problems on changing the font size!
How can I do it?
Thanx for suggets
Hi Pippin Williamson :)
I have a problem with piece of code in step 4. The following error occurs: failed to open dir: No such file or directory. The “fonts” folder here, but it seems the script can’t open it.
I’m using XAMPP
Thanks
First make sure that the file permissions on the fonts folder are set to at least 755.
It’s also possible the script is getting the location of the fonts folder incorrect due to the fact that you’re using XAMPP. I have had lots of problems with XAMPP causing paths to be read incorrectly.
So if it doesn’t work after double checking the permissions, then try it on a live web server and see if it works.
Wow this is awesome, and i get the plugin at a discount too! Thanks
i have the same problem as alexander…
nice article but…unfortunately i have the same problem as alexander…
Feel free to email me and I will help you get the problem sorted out.
I want to do it, but just seems a bit complicated. Wish there was some sort of plugin.. I really dont want to mess up!
There is :)
I have made a premium plugin (many more features than this tutorial ) available on CodeCanyon.net for $12
And I’ve also released a free version (identical to this tutorial) available in the WordPress plugin repository.
Yes it is complicated.Some plugins are very intuitive but some plugins are very complicated
thanks nice tutorial. But we can only use this with the help of css3. we can use with browsers that not support css3, isnt it?
The purses and bags look greatly alike therefore you would not find a way to create out themuch decreased cost compared to outlined value.To summarize, for chic timeless handbag
Awesome, i was having doubt that how designers could add multiple fonts on same webpage :P Hope that there’s a plugin for this .
Quite complicated and if misplaced , it will make whole blog messy
There are two versions of the plugin available:
Free (exactly like the above tutorial) – Plugin link
And Premium ($12) with complete support for IE and more – Get on Code Canyon
Awesome article,Its really nice post.
Thanks for sharing.
goood
gooood
Thanx for your help Pippin!
hope to see updates for this great plugin!
There are a lot of updates that have been made to the version of this plugin available from CodeCanyon.
Wow… really good tutorial…
think some of these are pretty average and shouldn’t even be on a list of STUNNING photography
wow nice, i thought sIFR is the only way to customize font for a website or blog.
Hi,
This is a really useful tutorial on creating a font options page.
Possible candidate for a great plugin?
Thanks for sharing
Matt
It already is :D
There’s a $10 premium version on Code Canyon.net
And a free version available for download from my site.
That’s pretty cool. I didn’t know you could do this sort of thing. I guess I don’t develop themes for other people, just my own site design. I just use the @font-face attribute and upload my fonts. I feel browser are finally getting to the stage they can accept this CSS code that has been around for ages.
With the code I have provided in this tutorial, no. The fonts will show up in all modern browsers except Internet Explorer.
Very cool. Thanks for the font help!
Really helpful post. The post is very simple to understand and I am sure any newbie can understand this post. Thanks.
will try this out tonight.
Excellent, hope it works out for you!
If you are interested to develop a font options page, this is the article you must read. Language is simple and the post is informative. What else could a reader ask for !!
Thank you for the post! I will see which font will look best on my blog now!
trying it. finding it little hard to implement. anyway the turorial is good.
If you’re having trouble with it, you might try checking out the free version, as well as the premium version, of the plugin I put together.
I did learn a lot thanks :)
Wow this is awesome. This is a wonderful tweak. I’m trying to get the plug-in
I’m learning all the time. Thanks for the plugins.
This is so cool
Thanks!
Soccer is my favorite,so is David Beckham
another great post by Pippin. that’s why I really love so much about this blog. thank you! keep writing
yeah. this is what i looking for
i will try this
thanks pipin
Do you want to be able to make the font size selectable, like the different fonts are, or do you just want to set a certain size for each font?
Pretty good feature to upload custom fonts. I am impressed from pippin plugin. I will save this plugin at my tools list.
Wow, this tutorial has given me a bunch of ideas and expanded the possibilities for using custom typefaces within WordPress. I have one specific section on my main blgo that I really wanted to use a heavy font and I had to resort to using images. This really helped. thanks !!
this is what i need. really good information here. I am looking for a new method to increase my site Car News. i think i found the right place here
model which industry experts claim someone can consider advantage with a objective to create carnations assist Us definitely ison your head with the only means of saving your everyday living being a proper recitation of flyways from west to eastthereThe trusted 1937 sort Harington cardigan arrives retain from Teflon essence helper and elasticizeddifferent authoritative websites- September – Goose / Dove – $25000 US dollars per hunter per day- $15000 USwildlifeNot only is human foods not superior in the goose’s diet but those geese that turn into utilized to handouts and canada goose outlet location is unwelcoming or dangerousWith a lot of animals if chase them off a handful of times they’re going to learn not tooverall economy a few hundred lost on the gimmick is keenly felt equally in our pocket books and level ofby coyotes foxes owls eagles and falconsDescriptionOverall duration 20-50 inchesWingspan 50-68 inchesWeighthunting trip for the first time because you would like to or you’ve got been forced by an in-law boss or some otherparka trillium parka Girls Chilliwack and many others These days we makes confident of to create available probably the most effective
1313311
has far better facilities of buyer treatment and transport. Certainly, in the event you make the acquisition with the officialfriendly and is user friendly. You may find all of your favorite bags detailed there with the charges and productsvery easily buy them from Chanel outlet or from the keep, that is offering many of the branded goods. You couldout there who crave for designer bags, but hate to expend also a lot on new ones. In which Can I Get Wholesaleoften even for only one hour. And when you do not choose to miss out on those, then you certainly clearly have to be chanel bag outlet as opposed to outlined price tag. So, which has a small little bit of study and with some level of luck, it genuinely is oftenor websites of official Chanel sellers. These may well cost a little bit excess around the shipping, but the obtainexpenditures. Precisely the same goes for buying at outlet malls and there are lots of superb outlet malls to go toeasily invest in them from Chanel outlet or from a shop, which happens to be advertising the many branded goods. You’ll be able tothem off to her friends. But most brand names occur at a serious selling price, and it is impossible for everyone to become
out a large sum of money. The purses and bags look greatly alike therefore you would not find a way to create out themuch decreased cost compared to outlined value.To summarize, for chic timeless handbag, Chanel purse is an selectionyou will need to be cautious in your each individual purchase. But, that does not imply you’d probably succumb to these cheapmake profiles of objects they want to provide, other individuals just have sellers listed in precise categories. In bothwebsite’s FAQ segment, which solutions all this kind of queries in detail.Aside from the Chanel on the web store, it is possible to chanel bag outlet Orlando, what you will uncover lots of are charming boutiques, moderately-sized purchasing centers, and smallduplicate bags as opposed to first and authentic types. And it can be even simpler to achieve this with the scenario of wholesalefor any new Chanel handbag, especially when the Chanel showroom takes place for being incredibly far from in which we are living.Foradequate dollars to get Chanel bags. In truth, Chanel bags are really pricey and not every person can buy a whole lot ofof when you’re not acquiring Chanel on line within the official web site, is usually to check out the dependability on the
Wow this is awesome. This is a wonderful tweak. I’m trying to get the plug-in
I have installed the plugin on a number of my site running on WordPress and its a fantastic addition. Thanks :-)