@font-face for WordPress

Tags: css cufon font font-face replace wordpress

Recently one of my clients requested to use an alternative font on their website. After examining the various font replacement possibilities I naturally chose for the full CSS @font-face replacement.

What a relief to work with this full CSS solution, it is working perfect. Easy font editting within the WYSIWYG editor as they appear in the front- and back- end of the website.

For convenience I created a nice WordPress plugin which makes working with replacement fonts through the css @font-face a breeze.

note: this plugin depends on TinyMCE Advanced plugin.

Features

  • Autoloads generated @font-face packages
  • Fully compatible with most browsers
  • Fully CSS solution – No Javascript required
  • Auto generates classes for the autoloaded fonts
  • Includes the required CSS files in TinyMCE editor
  • Auto creates TinyMCE @font-face styles
  • Additional CSS possibities through dashboard settings
  • All above auto options can be managed in the dashboard

Settings

Load in admin
When ticked the plugin will load the necessary CSS in the dashboard so you are able to replace fonts inside the administrational area. Not to confuse with the TinyMCE area which is another option!

Load CSS in tinyMCE
When ticked the plugin will autoload the required CSS in the WordPress TinyMCE editor. When additional CSS options are selected these will also be included.

Generate CSS class for each font
The ease of use of this plugin is mainly because of this option. When ticked the plugin will generate a CSS classname for using the autoloaded font. The font family name is read from the font generated package.

The class name which is generated is the folder in which the font is placed.
For the font-family CSS code this plugin automatically parses the generated
CSS code from fontsquirel.

Load generated CSS class(es) to tinyMCE styles
If ticked the plugin will add the autogenerated class(es) to the style dropdown box of TinyMCE.

Additional CSS
With the additional CSS textarea you are able to manually add CSS elements to the plugin. These will be loaded together with the selected options if preferred. Meaning you are able to change the front-end headers or even the dashboard fonts easily.

Screenshots

Installation notes

I should have explained more thorough that the following plugin is required: TinyMCE Advanced. When activating TinyMCE Advance in the settings you are able to drag the Format and Style dropdown boxes to the TinyMCE menu.

TinyMCE-Advanced

Download

Please visit the WordPress plugin directory to download this plugin or download the release here directly.

Comments

  1. 1

    Lodge

    Reply to the comment from

    Hi Opicron !

    I have just downloaded your plugin after installing TinyMCE Advance plugin. The custom font that I want to use in my site does not display on otther computer. I use rtPanel theme by the way.I add a font MYFONT on the file [path]/props.js. Then as I follow the method on [link removed] and modify also the ab_tinymce_init_setting [link removed]. So I can use it in TinyMCE

    Note that I installed locally on my computer (MYFONT.otf) and I can see the page written with the font. I downloaded your stuff as it may solve my problem in order to make the font viewable on visitors’ compute (the @ font-face). But it did not work.

    Then, after uploading the otf file on the website folder of the server, I added manually the @ font-face in the style sheet.css of the child theme with the relevant name and url ([path]/MYFONT.otf). But it does not work and furthermore the font did not display anymore. When I erased the @font-face of the stylesheet.css, I could see the font on my computer but not on other computer.

    If you have any idea, you are welcome !

    1. 1.1

      Opicron Post author

      Reply to the comment from

      First of all, thank you for trying my plugin!

      I add a font MYFONT on the file [path]/props.js. Then as I follow the method on [link removed] and modify also the ab_tinymce_init_setting [link removed]. So I can use it in TinyMCE

      This is something which you do not need to do. My plugin will add everything automatically.

      Note that I installed locally on my computer (MYFONT.otf) and I can see the page written with the font. I downloaded your stuff as it may solve my problem in order to make the font viewable on visitors’ compute (the @ font-face). But it did not work.

      Please note that my plugin only accepts typefont kits which are generated at http://www.fontsquirrel.com/fontface/generator. 1) Upload your font there 2) Generate the package 3) Upload the contents of that package to the /font/ folder of my plugin.

      Then, after uploading the otf file, I added the @font-face in the style sheet.css of the child theme with the relevant name and url ([path]/MYFONT.otf). But it does not work and furthermore the font did not display anymore. 

      The problem which you experience is that your relative path is problably wrong. Anyway do not add this code yourself, my plugin takes care of all the necesarry stylesheets by itself (yes, automatic ;) )

      After you try the above pointers your WordPress website should be capable of showing the font. However do note that you do need to add the class (which is selectable in the TinyMCE editor) to the text which you would like to show in the appropiate font.

      If you are really unable to install and use the font I can take over your computer with teamview and do it for you ;).

  2. 2

    Lodge

    Reply to the comment from

    Thank you Opicron,

    So I will try first and if really I have any issue about the font installation, I will ask! I will let you know the result anyway.

    See you soon

  3. 3

    Lodge

    Reply to the comment from

    Quick feedback : As fontsquirrel does not generate web font for non-Latin fonts, I can not use it. So I am looking for an other solution for generating fonts.

    1. 3.1

      Opicron Post author

      Reply to the comment from

      Please send me the font you are trying to convert by email and I will try for you with some additional css settings for non-latin fonts. You can contact me at opicron at gmail.com.

  4. 4

    Federica

    Reply to the comment from

    I’m sorry but I’m new on WP and on css language..
    I downloaded your plugin but I didn’t understand what I have to do. I uploaded the Blokletters Balpen Balpen font on fontsquirrel, I saved the generated package on my pc’s desktop. And after what I have to do? What you means with “Upload the contents of that package to the /font/ folder of my plugin. “? Where is the/font/folder of your plugin? I have to copy this:

    and if yes where I have to copy it? In plugin editor wp-font-face/generated.css

    1. 4.1

      Opicron Post author

      Reply to the comment from

      Please check the current /font/ sub folder of my plugin. You will find sample font data there (daniel font to be exact). If you create a new folder and copy every file from the package which fontsquirel generated it should be working. Let me know if you need more help.

    2. 4.2

      Opicron Post author

      Reply to the comment from

      And to add, copy or upload the contents of the fontsquirel package to wp you probably need a ftp program. Or if you are working with a local distribution just find the folder of the plugin in your wp distribution.

  5. 5

    Federica

    Reply to the comment from

    Dear Opricon,
    thank you for you reply.
    Ok I uploaded the webfont kit fontsquirrel on the server in font folder with Filezilla but nothing appens. So I deleted Daniel folder. I tried also to renome the folder. the webfont kit from fontsquirrel was nomed webfontkit-20121218-154033, so I called it Blokletters-Balpen-Balpen. After I went in WP plugin editor in wp-font-face/additional.css and I wrote:

    After I went in style-css and in style-css editor and I wrote as font family Blokletters-Balpen-Balpen butif I open my web-site I can’t see this font
    So what else I have to do?? I can’t also see the font option when I can to write an article as in your screen shoots. Thank in advance for your reply

    1. 5.1

      Opicron Post author

      Reply to the comment from

      You are nearly there, please check the CSS of the fontsquirel package for the exact font-family name which you should use as the font-family in the additional CSS. Is it really Blockletters Balpen Balpen? Because this name seems invalid.

      Also, to use the autogenerated TinyMCE style dropdownbox you will need to install the Advanced TinyMCE plugin in wordpress. After installation you are able to configure the TinyMCE style dropdownbox in the plugin settings (not WP font-face plugin settings, but Advanced TinyMCE plugin settings).

      Optionally this plugin creates an CSS class which includes the font-family. The foldername is also the CSS class name. Please refrain using capital letters and dashes (-). In this case I would rename the folder to blockletterbalpen. Then you can use the class .blockletterbalpen in your html where you would like to show the font.

    2. 5.2

      Opicron Post author

      Reply to the comment from

      If things still are not working please drop me an email and I we will make it work together. By using teamviewer or by me visiting your wp dashboard and make things work ;).

    3. 5.3

      Opicron Post author

      Reply to the comment from

      By the way, did you extract the package which you downloaded from FontSquirrel? Or did you upload the archived package (zip) to the /font/blockletters-balpen-balpen/ folder?

  6. 6

    Federica

    Reply to the comment from

    Yes I extracted the pakage before upload it in font folder. I cheked the name of fontsquiirell and this is ‘blokletters_balpenbalpen’ so a little bit different from that one I add. So the problem can be this? I will try to change it. I didn’t understand, I have to use TinyMCE and to do all you suggest me or it isn’t necessary to change my web-site font?

    1. 6.1

      Opicron Post author

      Reply to the comment from

      Yes, you need to use the font-family name which is in the generated fontsquirrel CSS file. If you install the plugin which I suggest (Advanced TinyMCE) and drag the style dropdown box to the menubars of TinyMCE it should work.

      In my next release I will make sure to include the style dropdownbox automatically if it is not yet added to TinyMCE. Also I will add another section to the admin side which will show the classnames and found fonts in the /font/ plugin.

      Thank you for your feedback, it will improve the plugin a lot!

  7. 7

    1. 7.1

      Opicron Post author

      Reply to the comment from

      Please contact me at opicron at gmail.com and I will work together with you to get the plugin working on your website. I will do everything I can to have it function as you wish.

  8. 8

    Federica

    Reply to the comment from

    Dear Opricon,
    yesterday I closed my pc very discouraged but today good news. I just opened my web-site and in the end Blokletters font works! Thank you very much for your support!

    1. 8.1

  9. 9

    sally

    Reply to the comment from

    Hello,
    I too am very new to making a website, WP, etc.
    I have got to the point of activating your plugin, and downloading the font package i want.
    the font package is sitting in a folder on my computer, (i believe unzipped) but despite trying to understand the above posts i still dont understand what to do.
    how do i get that font into your plugin? If there is coding involved then i wont be able to do it. One of your answers were:

    Please check the current /font/ sub folder of my plugin. You will find sample font data there (daniel font to be exact). If you create a new folder and copy every file from the package which fontsquirel generated it should be working.

    I dont understand how to even do that! sorry. Also dont know if i have or need the ftp system…….
    I have been able to get this far, creating my website because of step by step utube video but plug ins seem to stump me!
    Hope you can help ?
    thank you

    1. 9.1

      Jonathan Hartley

      Reply to the comment from

      Totally with you on this, I should have read your post first before I posted below.. Can anyone shed some light on this? I am sure there are many others new to this who would appreciate a hand.

      Thank you in advance.

    2. 9.2

  10. 10

    Chad

    Reply to the comment from

    You really have to have a much more detailed step by step instructions on how to use your program for those of us who do not sit and work on websites and web software. I downloaded the program and activated it and now what I see some random things like download font package and load to some folder and you might need ftp software. That isn’t very helpful Step 1 Step 2 Step 3 all the way through would be much appreciated. I really just want to go to were I type the content for my site and adjust fonts just like I would in Word that is what I thought this would do.

    1. 10.1

  11. 11

    Marc-André Weibezahn

    Reply to the comment from

    Hi, thank you for your plugin. Sadly, after I activated it, I did not see the option in the admin editing panel to choose any fonts. And the “daniel” font is set automatically for all my page titles. Maybe something went wrong? All I did was installing the plugin and activating it, I did not change any of the settings.

    Thanks in advance!

    1. 11.1

    2. 11.2

      SAMANTHA

      Reply to the comment from

      This happened to me also — i have spent hours trying to find out how to change etc etc looking on forums and this and that and am totally confused! All my headers are in Daniel. I also uploaded fonts into folder, put them in sylesheet (with the correct code) wasnt sure if it mattered where i put in stylesheet, first tried at top then at bottom. I then put the font i wanted as first option in front of all other ‘font-family’ sections i could find on stylesheet. yet nothing changed and now i cannot even choose a font at all, now i can change the size of the text and a few other options have appeared but nothing to do with fonts. Thanks!

    3. 11.3

  12. 12

    chris

    Reply to the comment from

    Hi Opricon,
    I loaded the plugin and installed no problem. I can not see it anywhere. It does not appear in tinyMCE. only the settings panel appears in admin. Can you help?

    1. 12.1

      Opicron Post author

      Reply to the comment from

      Besides this plugin you will need the TinyMCE Advanced plugin. In the settings of the latter plugin you are able to drag the Style dropdownbox into your TinyMCE kitchen sink bars.

  13. 13

  14. 14

    Jonathan Hartley

    Reply to the comment from

    Hello, Im an absolute newbie to this..

    Where do I find the /font/ folder to upload fonts to? This may be very obvious to you all, but for new users of WP it can be a massive learning curve!

    step by Step guide for this could be great!

    Thank you for your help.

    1. 14.1

      Opicron Post author

      Reply to the comment from

      Hi thank you for your comment. I will make a more detailed step by step tutorial this weekend.

    2. 14.2

    3. 14.3

      Opicron Post author

      Reply to the comment from

      Sorry but I have less and less time to give additional support. With some experience in css it should be quite straightforward. Please check all the comments, it might help you more.

Leave a Reply

*