Using @Font_Face for custom fonts

[Grimwolf]

I'm trying to use @font_face to add custom fonts to my site, and while there is a huge amount of information available on this subject, it all seems to be wildly conflicting and incomplete.
Almost every source claims a fairly unique method for using it, and almost none of them tell how to actually call the font in a post once you've uploaded it to the site.

By attempting to follow the closest thing to a consensus I could make out from various sources, I downloaded a font-face kit from fontsquirrel.com, unzipped all the files into a folder called fonts, and altered the included stylesheet.css to have fonts/ before the source links, like;
src: url('fonts/immortal-webfont.eot');
(I did try leaving it exactly as it was the first time, and that didn't work either)
Then I used an FTP program to upload the fonts folder to my theme folder (minimum).

This is as far as any of the guides seem to go. It didn't magically replace every font on my site, and I can't figure out how to call the font into a post manually which is how I'd actually prefer it anyway.
One person seemed to suggest that I should add a line like this inside a code tag at the top of the post, but it showed up visibly in the post and did nothing;
font-family:, ImmortalRegular, Arial, Helvetica, sans-serif;

Under the assumption that the stylesheet.css was not pointing to the proper directory listing only fonts at the start and not all the folders before it, I also tried to move fonts to the very base folder of the site and that didn't work either.
The biggest problem I may be having here is that I just cannot figure out how to call the font in a post. That is definitely the first thing I need to figure out, but I can't find anything listing a functional method. The few I did find couldn't even be used to trigger one of the base site fonts.

[Dorian Speed]

Here's what I have done before:

Download the font-face kit from Fontsquirrel and unzip the file.
Place the whole file - not having made any changes - into the theme folder.
Edit the style.css file for the theme to say "font-family: 'ImmortalRegular', Arial, Helvetica, 'sans serif'; or whatever font I'm using. Find the selectors you want to change - so, for example, if you want Heading 1 to always be in your fancy cont, find h1 in style.css and specify that font face.

Or - if you're calling from within the post itself via HTML, you would say something like
fancy text.

These links may be helpful if you're thinking about using inline styles - styling the text within the post itself instead of via the style.css theme file. (I myself wouldn't do it that way - I'd use CSS.)
http://www.w3schools.com/tags/tag_span.asp
http://www.w3schools.com/html/html_css.asp

---

Bringing websites Up to Speed
Firebug will light the way to understanding the secrets of the Internet!

[Grimwolf]

I still don't fully understand; where in the style.css should I place that new line, and what do you mean by "find h1 in style.css and specify that font face"?
Should I find the line that says "h1," and add some bit of code next to it?

I tried simply adding immortalregular to the start of similar looking code already existing inside style.css, but that didn't work. Somehow it seemed to do nothing at all.
I also seem to be getting a background error on my site now saying some file is pointing to an incomplete directory, which I think may be the stylesheet.css included in my fonts folder which, after returning it to the default values, is no longer pointing to any existing directory in which to find the fonts.

[Dorian Speed]

Okay - in your style.css file, find the line that says h1. It will probably say something about the color of the text, the font-size, etc. Here's an example for the font "Felipa" (which is a Google Web Font, but I believe this same code should work with a font-face kit).

h1 {
	font-family: 'Felipa', cursive;
	font-size: 30px;
	line-height: 36px;
	color: #457599;
}

That's telling it - whenever Heading 1 is being used, the font should be Felipa, with cursive as the backup, and the size should be 30px, etc., etc.

I'm not sure how to troubleshoot that background error. I think I'd try downloading a brand new version of the font-face kit from Fontsquirrel, just to be sure it's all correct, rather than trying to undo changes you made to one of the files.

---

Bringing websites Up to Speed
Firebug will light the way to understanding the secrets of the Internet!

[Grimwolf]

I didn't find anything inside minimum > style.css that looked exactly as you descriped, with the font code immediately following h1 {
But I found similar things, like this:
/* Headlines
------------------------------------------------------------ */

h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
line-height: 1.25;
margin: 0 0 10px;
}

And tried changing
font-family: 'Open Sans', sans-serif;
to
font-family: 'immortalregular', Open Sans, sans-serif;
but it didn't work.

Also, I tried re-uploading all the fontsquirrel files unaltered.
The code inside the stylesheet.css included in the font folder now looks like this:
@font-face {
font-family: 'immortalregular';
src: url('immortal-webfont.eot');
src: url('immortal-webfont.eot?#iefix') format('embedded-opentype'),
url('immortal-webfont.woff') format('woff'),
url('immortal-webfont.ttf') format('truetype'),
url('immortal-webfont.svg#immortalregular') format('svg');
font-weight: normal;
font-style: normal;

}

I tried using the .ttf font on my computer itself and it works properly, so the files aren't broken.

I've also tried viewing it in three different browsers, including Firefox, IE and Chrome.

[Grimwolf]

Yes! I finally figured out the missing step.

You don't add Stylesheet.css to the fonts folder, where it starts out. You copy the code INSIDE Stylesheet.css and paste it somewhere inside the style.css file found inside your child theme folder, the same place you should place the fonts folder. (I pasted it inside the block for Defaults near the top of the file, though I'm confident it makes no great difference where you paste it).

Also, the code found inside the stylesheet.css file really does need to have fonts/ appended to the start of each directory listing for the fonts.

After that, you tell it where to use the font by doing what I did earlier and finding the bits that look like "font-family: ‘Open Sans’, sans-serif;" in various areas, and adding your custom font as the first one listed.

[Dorian Speed]

Huh - good to know! Glad that worked for you. I'm wondering why I didn't have to do that on the sites where I've used font-face. Regardless, I am going to make a note of this for next time I am trying to use it on a site. I think you can mark this thread as "resolved" if you feel like your original question was answered...even, uh, if you were the one who answered it.

---

Bringing websites Up to Speed
Firebug will light the way to understanding the secrets of the Internet!

[marybaum]

Dorian,

I generally @import the typeface's stylesheet.

I drop the font files and the style sheet - renamed something other than stylesheet.css, so I don't have four sheets with that name - in a folder for the type family, and the family folders in a folder called type.

Then I do this:

@import url(type/familyfolder/familyname.css);

And I make permanent copies of those folders on my hard drive. Some of these families, with multiple weights, are a real pain to set up like this - I only want to do it once. 😉

Mary

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[Author]

Posts