Question

I have two sites using the same exact code for @font-face. The font files are hosted on the respective sites and the paths are correct.

One works, one doesn’t. (And of course it works on my personal site and not the clients!)

I’d really appreciate some fresh perspective on this!

Where it WORKS:

The site: http://example.com/

The CSS file: http://365.example.com/index.php?css=photos/style.v.1275845154

The relevant code:

@font-face {
    font-family: 'JournalRegular';
    src: url('./themes/fonts/journal.eot');
    src: local('Journal Regular'), local('Journal'), url('./themes/fonts/journal.ttf') format('truetype');
 }
body{
    background: url("http://labs.example.com/personal/library/images/BG.jpg");
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'JournalRegular', Georgia, 'Times New Roman', Times, sans-serif;
    color: #999;
 }

Where it DOESN’T WORK:

The site: http://www.example.org/

The CSS file: http://www.example.org/wp-content/themes/theme/style.css

The relevant code:

@font-face {
    font-family: 'JournalRegular';
    src: url('http://example.org/wp-content/themes/theme/fonts/journal.eot');
    src: local('Journal Regular'), local('Journal'), url('http://example.org/wp-content/themes/theme/fonts/journal.ttf') format('truetype');
 }
.title h1{
    float:left;
    background:url(images/blt-ttl1?.png) no-repeat 0 4px;
    margin:0px 0 5px;
    /* padding:8px 0 8px 34px; */
    color:#bd5f01;
    letter-spacing: .5pt
    font:24px/26px 'JournalRegular', Georgia, 'Times New Roman', Times, serif;
}

Any help would be so greatly appreciated!

Answer 1

Font-embedding, that is, the @font-face requires the font file to be created on a per-domain basis.

That’s because the some fonts might have copyright issues.