Local font works in back-end; does not work in front-end

Can you explain what specifically you did to apply it on the front-end? Did you enable it? Did you add a CSS selector in the UI, or directly in your theme CSS? Can you see which CSS files are loading?

If this is on a site I can view, please send me the URL. If it's not yet public but I can still get to it, you can send me the URL via my contact form and I'll keep it private.

I'm seeing two problems. First, it looks like you only uploaded a TTF file for each font and none of the other formats. I say this because the stylesheet.css files only point to TTF files, and those should point to every file you uploaded. As explained on the upload page, different browsers require different formats, so that's probably why you're only see it in some browsers.

Second, the TTF files that are loading don't appear to match the fonts. They both look like a different font, I'm not sure which one. I'm looking directly at the font files, not the rendering on the site, so this may indicate a problem with the files you uploaded.

I think fixing those problems should resolve your issue, so I'm marking this as fixed, but feel free to ask more questions if you have them.

I see the fonts have the various formats now, so that's progress. It looks like the problem now is too many conflicting font declarations. Looking at the header, it has 5 different font families attached, which makes it hard to tell what's going on. I suggest you start by removing all font declarations in your CSS, and add fonts one at a time to focus on one problem at a time.

I'm previewing the fonts in Chrome's in-browser font preview, which doesn't look the same as the online sampels I've found for the fonts you're using, but maybe you're using different versions.

The inability to load local font files in theme.info is just a limitation of how local fonts work, not a bug, so there's nothing to "fix" there. That has nothing to do with your problem.

Reading through this issue prompted me to post some additional documentation/steps on importing local fonts to the @font-your-face Documentation. Posting here in case it helps @hockey2112 or anyone else encountering some of these local-related issues.

basically you need to add the full path to the font in the theme stylesheet:

example

@font-face {
font-family: "Quaver Sans";src: url("/sites/default/files/fontyourface/local_fonts/Quaver_Sans-normal-normal/quaversans-webfont.eot");src: url("/sites/default/files/fontyourface/local_fonts/Quaver_Sans-normal-normal/quaversans-webfont.eot?#iefix") format("embedded-opentype"), url("/sites/default/files/fontyourface/local_fonts/Quaver_Sans-normal-normal/quaversans-webfont.ttf") format("truetype"), url("/sites/default/files/fontyourface/local_fonts/Quaver_Sans-normal-normal/quaversans-webfont.woff") format("woff"), url("/sites/default/files/fontyourface/local_fonts/Quaver_Sans-normal-normal/quaversans-webfont.svg#quaver_sansregular") format("svg");font-style: normal;font-weight: normal;
}

maybe fontyourface can generate this as a copy/paste snippet?

emilyf, thanks for the documentation. That's great!

ibuildit, the module already generates the required CSS automatically. You shouldn't need to add it yourself at all. If you're needing to do that, please open a separate issue explaining how you're using the module.

hockey2112, are you still having this problem? Sorry, I lost track of this for a while. If you're seeing the fonts in some browsers but not others, that's almost certainly a problem with the specific formats those browsers support. Here's a reference chart to see which browsers use which formats:

http://socialcompare.com/en/comparison/browser-fonts-support-comparison

It looks like you're having the most trouble with Firefox, which suggests there's maybe something wrong with your WOFF files. You can use Firebug to confirm which font files are loading and also preview them to make sure they look right. Let us know what you see and we can go from there.

Okay, I'd still like to figure out why that work-around is needed. If anyone can give more detail on what's actually showing up in the sites/default/fontyourface/font.css file when the fonts aren't loading, that would be helpful.

@sreynen

I'm running into this issue now. To answer your question, the font.css file is empty.

Not sure if this is related. When I tried to enable a local font, the font.css file was not included in the page.
Only after setting a css selector it was included. Seems like the font.css file will not be included when no selector is used.

As a workaround based on Trooperduck's comment, I created a custom 'none' CSS selector to force the css to be produced.

I have the same problem. The preview text in back-end renders as normal but the real text in front-end is rendered as the browser's default font. #15 solves it as a workaround. I have @font-your-face version 7.x-2.8 and Google fonts and Edge fonts. Squirrel fonts does not show any previews.

Hello,

I had the same issue.
Choosing "-- add selector in theme CSS --" option within "CSS Selector" column solved the issue for me. (similar to what #15 suggested)

Just a point of information: I was having this issue, but luckily it was simply due to a stupid mistake on my part. I'm commenting here in case anyone else makes the same mistake and maybe I can save people from some hair tearing.

In my case, I didn't name the font *exactly* the same name as it is in the font files (or whatever name declaration they follow in the css). So for example, my font files/declarations are called "wellnessico"... but I inadvertently put in a different name from that in the "CSS Font Family" field on import at /admin/config/user-interface/fontyourface/local_fonts (for whatever reason I thought it was supposed to be more descriptive/human-readable). This created an odd disconnect that allowed me to see the font in previews, but they wouldn't render on the front-end of the site.

Anyway, hope that bit of information helps someone.

<?php
test
?>

4 years later, the "problem" still exists. I solved it thanks to #15. I choose "add selector in theme CSS" so I could choose where to use my local fonts, and now it works. Never keep it on "none" !