Coding since '92

Menu

@font-face for 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 adminWhen 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.

Download

Comments

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.

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 ;).

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:

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.

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.

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:

1

2

3

4

5

.site-header h1, .site-header h2,

.entry-header, .entry-title, #reply-title

{

font-family:"Blokletters Balpen Balpen";

}

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

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.

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?

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.

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

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.

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.

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!

Did you ever create a more detailed installation instruction? I thought I installed everything OK. daniel shows up in the drop down as does my font. Selected text actually shows as daniel but text selected for MyFont do not. When I look at the post in my browser, the same holds true.