Hi Great and Powerful Sebastian!
I’m back! I hope all is well with you & yours.
Here is my continuing pesky font problem:
1. I have purchased many webfonts from various professional font sellers.
2. I have unzipped the purchased professional fonts using Winzip (to rule out any errors with using Windows explorer as the unzip program, at the suggestion of my webhost). The font files for each font face that I uploaded to WordPress include files with extensions .ttf, .eof, .woff, .css and .html.
3. I have FTPd the above unzipped font files to WordPress – specifically to a folder that came with WP (i.e., I’m not creating a new folder for the fonts). The pre-existing wordpress folder is called [root directory]/wp-includes/fonts folder. QUESTION: IS THIS THE RIGHT PLACE TO UPLOAD THE FONTS FOR MICROTHEMER TO FIND THEM? IN OTHER WORDS, WHERE EXACTLY IS MICROTHEMER LOOKING FOR THE PURCHASED FONTS?
4. I then login into my site and use Microthemer to add the purchased fonts, using the ‘in quotations’ instructions you gave me when I first raised this problem. As a reminder, the Microthemer screen looks as if Microthemer did add the fonts to my site, but in fact Microthemer did NOT add the fonts – the fonts only show up in Microthemer because my PC in its infinite wisdom is grabbing the fonts off of my hard drive rather than from the web server. The same thing happens if I go to the web on my PC having the fonts on my hard drive – the fonts show up, but ONLY because the fonts are being grabbed from my hard drive. I know this because (as you requested several months ago), I worked with my web host on this and they can’t get the fonts to show up on ANY of their devices (PC or Apple) after I’ve used Microthemer to add the fonts. In other words, the Apple vs PC issue was just a canard. As further proof, the fonts also don’t show up on any other tablet or phone in my house – at first I expressed to you that I thought this was an Apple vs PC issue but it’s not – the fonts don’t show up an ANY device in the house regardless of whether the device is an Android, PC or Apple – the key issue seems to be whether that device already has the font on its hard drive or not. If the font isn’t on a device hard drive, the website displays a boring substitute font.
5. According to my host, this likely means that I’m not uploading the fonts to where Microthemer is telling the website to find them. My host says you would know the answer to this – where is Microthemer looking for those purchased fonts – i.e., please tell me where to upload my purchased fonts 🙂
6. As you know, the Google fonts work great. My site is entirely Google Fonts right now, because I had to give up on the purchased ones until now, because I didn’t have any time before to deal with it after the host sent me back to you. In other words, I’m your problem again 🙁
QUESTION 1: Maybe I am uploading the fonts to the wrong place in WP? RIght now all the .ttf, .eof, .woff, .css and .html files are respectively placed in my pre-existing wordpress folder called [root directory]/wp-includes/fonts folder
QUESTION 2: Should I be uploading the .css or .html files that comes with each purchased font to a second WordPress folder in a second upload? Right now all the .css and .html files that comes with the fonts are in the same place as the .ttf, .eof, and .woff font files, since I thought the point of Microthemer was to write the CSS for me.
For now, I can tell you that Microthemer can’t be used to install custom fonts. That’s something you would need to set up manually. It can apply your custom fonts once they’ve been included in the page correctly though. I can help you with this on Sunday.
I then entered the name of the font into the font-family field in Microthemer: victor_hugoregular.
With this particular font, I had to rename the font-family value inside the @font-face declaration. It starts with a number (1871), which appears to be invalid CSS when entering it into Microthemer’s font-family field. Note: I didn’t have to rename the actual font files (e.g. 1871_Victor_Hugo-webfont.eot) just the font-family value inside the @font-face declaration, and then use that reference in the Microthemer UI font-family fields.
I had some problems fully moving the font files to the /wp-content/micro-themes/ folder via FTP. Your server keeps kicking me off. I’ve emailed you about this issue.
Hi Great Sebastian,
You do know you’re a KIND and THOUGHTFUL genius, don’t you? I am writing this post so that you know how much I appreciate the great customer service.
I did upload the font files to where you wanted them, and I also sent you an email with some other info.
Thank you again, very much appreciated,
Thanks for the email. I’ll include your questions and my answers below as this thread on custom fonts may help others.
Will adding the code for the fonts if I don’t use more than a few fonts on a given page/post slow down the whole site automatically?
Does what you wrote mean that for every font name I want to use, we need to add separate code somewhere, so that using just one of those fonts means entering three different codes with one for FONTSTYLE-bold, one for FONTSTYLE-reg, and one for FONTSTYLE-italic (for example)? -So a list of 100 font names becomes a list of 600 different sets of code?
In the picture it shows the line /* @import ‘stylesheet.css’; /* Font name: 1871_victor_hugoregular */ in addition to what you sent me, so is that something we add every time too, or did you do it the one time it needed to be done so it’s already there?
Is the @import’stylesheet.css’ a file somewhere else that you are tinkering with too (and do I need to know where)?
Are the colors shown on the screen important? i.e, do the green, purple, teal and fuchsia letters happen automatically?
I updated the code in Nicole’s picture to show by example two ways to include custom fonts. Directly with @font-face as in the picture. And indirectly by importing the font’s .css file with @import.
/* one way of including a font - faster because we're not loading extra stylsheets, but more complex */
src: url('1871_Victor_Hugo-webfont.eot?#iefix') format('embedded-opentype'),
/* another way of including a font - slower, but easier to maintain */
/* @import 'stylesheet.css'; /* Font name: 1871_victor_hugoregular */
/* SaboresScript */
/* SaboresScriptItalic */
/* SaboresScriptSemibold */
/* @import 'SaboresScript-Semibold.css'; */ /* this @import has been commented out so it doesn't load (and slow the page)
/* @import 'stylesheet.css'; /* Font name: 1871_victor_hugoregular */
My answers to Nicole’s questions:
Yes. Adding fonts to the page slows them down. They are loaded even if they aren’t used in Microthemer. But take a look at the custom code editor again. I’ve included SaboresScript as an example using a different method: @import. Notice how this relates to the font files you uploaded to the /wp-content/micro-themes/ folder. You import the name of the font file that has a .css extension: @import ‘SaboresScript-Regular.css’; You can disable the fonts from loading by commenting them out: /* this is a CSS comment text because it has forward slashes and stars either side */. I’ve done this for the semibold version of SaboresScript as an example.
Yes, each variation needs to be loaded separately. And each variation adds weight to the download size. See my example with SaboresScript italic and semibold.
You picked up on some CSS comments I added. I had previously commented out the @import for the hugo font.
stylesheet.css is a file you uploaded to the /micro-themes/ directory. It can be imported to include the hugo font (although I’ve pasted the code in that file directly into the custom code editor, thus negating the need to import it with @import). Unlike most font .css files (e.g. SaboresScript-Regular.css) it has a generic name (stylesheet.css). For each font, including variations of font (bold etc) you need to upload 6 files to the /micro-themes/ folder (.eot, .woff, .woff2, .ttf, .svg, .css). See the ‘Zelda’ font you uploaded to the /micro-themes/ folder as a model example of this. I don’t think you have uploaded the extracted 6 files for every font to the /micro-themes/ folder. You probably have a bit of work to do in that respect.
The colors in the custom code editor happen automatically. So the CSS comments are green to help you understand what the code is doing. This is called ‘syntax highlighting’.
So your task now is to:
Upload every font-file to the /micro-themes/ folder
Include your custom fonts using @import (linking to the file that ends with .css)
Comment out most of these lines like I’ve done with the semibold version of SaboresScript (so they don’t slow your page down too much).
Leave the only ones you actually want to apply to the page uncommented out (as normal).
Do you think you can follow my example and go your own way with this from now?
First, I think it’s awesomely nice you took the time to give such a useful explanation of what to do. I sent you an email – thrilled to be learning this – the @font method works (whooohooooooo) but … (alas the ‘but’)…. I am having issues with the @import method – sure it’s my user error somewhere – please see my email for details -sorry & THANK YOU!
Hmm. I’m totally stumped by this. Perhaps the @import statement doesn’t work with custom fonts for some reason. I couldn’t find anything online about it. Could you just stick to the direct @font-face method for now?
Yippeeeeee, Yeeehaw, Yowza! I am LOVING using my custom fonts with Microthemer. @fontface method works like a charm. So easy! Am so pleased, THANK YOU Oh Wise & Wonderful Sebastian for illuminating my path to illuminating my site http://www.Nicole.bz So fun to finally use the fonts I’ve purchased. Couldn’t have done it without your kind and patient explanation (and Microthemer still shortcuts a lot even if fonts not Google fonts).
Suggestion for future: wouldn’t it be neato keen if Microthemer would add to the Microthemer drop down font menu whatever custom fonts have been set up manually in the coder via @fontface ?
I’m glad you’re enjoying your new fonts Nicole. And you make a valid suggestion.
Scanning the custom code area(s) for fonts could be a bit expensive in terms of browser horse power. But we’re going to add a feature soon whereby Microthemer remembers values you enter into any of the fields. It will then present them as suggestions, a bit like Google’s predictive search suggestions. That way you would only need to manually type the font name into the font-family field once.