I purchased Fonts, uploaded to WP but Microthemer isn't adding them to website

Hi Nicole,

To get your custom font working, I uploaded the font files to the /wp-content/micro-themes/ folder. I then added the following code via Microthemer’s custom code editor:

@font-face {
    font-family: 'victor_hugoregular'; 
    src: url('1871_Victor_Hugo-webfont.eot');
    src: url('1871_Victor_Hugo-webfont.eot?#iefix') format('embedded-opentype'),
         url('1871_Victor_Hugo-webfont.woff2') format('woff2'),
         url('1871_Victor_Hugo-webfont.woff') format('woff'),
         url('1871_Victor_Hugo-webfont.ttf') format('truetype'),
         url('1871_Victor_Hugo-webfont.svg#1871_victor_hugoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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.

Hey Nicole,

Thanks for the email. I’ll include your questions and my answers below as this thread on custom fonts may help others.

Nicole’s Questions:

1. 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?
2. 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?
3. 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?
4. Is the @import’stylesheet.css’ a file somewhere else that you are tinkering with too (and do I need to know where)?
5. 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 */
@font-face {
    font-family: 'victor_hugoregular';
    src: url('1871_Victor_Hugo-webfont.eot');
    src: url('1871_Victor_Hugo-webfont.eot?#iefix') format('embedded-opentype'),
         url('1871_Victor_Hugo-webfont.woff2') format('woff2'),
         url('1871_Victor_Hugo-webfont.woff') format('woff'),
         url('1871_Victor_Hugo-webfont.ttf') format('truetype'),
         url('1871_Victor_Hugo-webfont.svg#1871_victor_hugoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* another way of including a font - slower, but easier to maintain */

/* @import 'stylesheet.css'; /* Font name: 1871_victor_hugoregular */
/* SaboresScript */
@import 'SaboresScript-Regular.css'; 
/* SaboresScriptItalic */
@import 'SaboresScript-RegularItalic.css'; 
/* 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:

1. 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.
2. 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.
3. You picked up on some CSS comments I added. I had previously commented out the @import for the hugo font.
4. 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.
5. 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:

1. Upload every font-file to the /micro-themes/ folder
2. Include your custom fonts using @import (linking to the file that ends with .css)
3. 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).
4. 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?

Cheers,
Sebastian

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?

Cheers,
Sebastian

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.

Would that work for you?

I agree Sebastian is great!!