Custom font not displaying with @font-face?

Question

UPDATE: Now solved! As Johannes suggested in a comment, I removed the space between the format declaration and opening parenthesis. Going from "format ('woff')" to "format('woff')". I can't believe all the time and frustration an extra space caused, but I am so glad to be at the end of this! Thanks to everyone who tried to help. ***

I have used @font-face to utilize two custom fonts in my website project. They both display perfectly on my computer that has the fonts installed on it, but they will not display on any computer that does not. If I have the font files uploaded into my project, and link to them, should it not work?

I've tried having the font files in their own folder, and in the css folder. I've tried listing each format on a separate src line and as a comma separated list. If I type in the link to the font directly (i.e. mysite.com/myfont.ttf) the font downloads, so I really feel like it should display on all computers.

Here's what I've got:

@font-face {
    font-family: 'Robotica';
    src: url('robotica.eot');
    src: url('robotica.eot?#iefix') format('embedded-opentype'),
    url('robotica.woff') format ('woff'),
    url('robotica.ttf') format ('truetype'),
    url('robotica.otf') format ('opentype'),
    url('robotica.woff2') format ('woff2');
    font-weight: normal;
    font-style: normal;
} 

@font-face {
    font-family: 'Bradley Hand ITC';
    src: url('bradley.eot');
    src: url('bradley.eot?#iefix') format('embedded-opentype'),
    url('bradley.woff') format ('woff'),
    url('bradley.ttf') format ('truetype'),
    url('bradley.woff2') format ('woff2');
    font-weight: normal;
    font-style: normal;
}

header h1 {
    font-family: 'Bradley Hand ITC';
    font-size: 350%;
    font-weight: 100;
    color: #fcfcfc;
    line-height: 0.5;
}

header h1 span {
    font-family: 'Robotica';
    font-size: 39%;
    color: #101010;
    -webkit-text-stroke: 0.5px #fcfcfc;
    text-shadow: 2px 2px 0 rgba(81, 81, 81, 0.2),
     -1px -1px 0 rgba(81, 81, 81, 0.3),  
      1px -1px 0 rgba(81, 81, 81, 0.3),
      -1px 1px 0 rgba(81, 81, 81, 0.3),
       1px 1px 0 rgba(81, 81, 81, 0.3);
}

?#iefix also did not work. The problem is not browser specific. Font Squirrel is what I used to create the different formats, so that is not the answer.

But with everything I've tried on any computer besides mine, the custom fonts are not displayed but rather the serif default.

Answer 1

I think the way you write it (i.e. separate src definitions for all the available formats) makes the woff2 format overwrite all the others, so if a browser can't handle woff2, it won't work.

So instead of all those semicolons and repeated src, try it this way:

@font-face {
    font-family: 'Robotica';
     src: url('robotica.eot') format('embedded-opentype'),
          url('robotica.woff') format ('woff'),
          url('robotica.ttf') format ('truetype'),
          url('robotica.otf') format ('opentype'),
          url('robotica.woff2') format ('woff2');
    font-weight: normal;
    font-style: normal;
} 

(same/similar for the other font)

EDIT (moved from comment to answer): In addition, you should remove the spaces between format and the subsequent opening parenthesis of the format description (like format('woff') instead of format ('woff').