0

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
msnap12
  • 3
  • 6
  • Are you sure the file path is correct? – David Aug 13 '19 at 18:38
  • 1
    url is relative to folder where is your css file, try it – Lety Aug 13 '19 at 18:41
  • Yes, I am absolutely sure the file path is correct. They used to be located in a separate folder that I linked to: url('Resources/Fonts/robotica.ttf'); but that did not work either. – msnap12 Aug 13 '19 at 21:31
  • I used Font Squirrel to convert the fonts to all of the different formats, so that doesn't help me. – msnap12 Aug 13 '19 at 21:37
  • I've tried the ?#iefix and that didn't help either. And the fonts don't show up on any browser, so it's not just an Internet Explorer/Edge problem. – msnap12 Aug 14 '19 at 15:32
  • did you check your console to _verify_ that your path to fonts is correct? If it is not, you should see a 404 error in the "Network" tab in console. – yqlim Aug 15 '19 at 03:38
  • Yes I verified, there is no error. The fonts display on my computer and one other I've tried, in all browsers. Proof that they can be read correctly. However, on 7 other computers (all up to date, and on multiple browsers) they do not display. – msnap12 Aug 15 '19 at 04:12
  • In the "Network" tab in the console, it shows that the files have downloaded. But if you click on them to display, they just show up as regular serif font. However, on the two computers that display the fonts they read correctly. How does that make any sense? – msnap12 Aug 15 '19 at 15:49

2 Answers2

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').

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • I tried this way before, and your way is the way I currently have it. It still is not working. – msnap12 Aug 15 '19 at 00:41
  • I said in the question I've tried it both ways, and since I posted the question tried your way again still nothing. – msnap12 Aug 15 '19 at 12:52
  • 1
    I can't believe it but that actually worked! All of this time and frustration put into this, and it turns out to be an extra space that is causing it... I am so glad to get to the bottom of this, I had given up. Thank you so much! – msnap12 Aug 16 '19 at 19:32
  • you're welcome - I've had similar situations, so I know what it feels like... ;-) – Johannes Aug 16 '19 at 19:46
  • I just moved the contents of my last comment (which apparently provided the solution for your problem) to my answer, so you could mark it as "accepted answer". (Inserting "solved" into the question title as an edit isn't the way solved questions/PROBLEMS are supposed to be handled in SO) – Johannes Aug 16 '19 at 21:03
0

Css most likely doesn't read the files where you've placed them. I suggest being more specific in the url there. Like url(../../css/fonts/robotica. eof). That's making sure it directs to the path in the online project. The project is hosted though, right?

Jotham
  • 1
  • 1
  • 2
  • Like I said, I tried that. I used to have the files in their own folder and had the correct path linking to them. They are now in the same folder as the css file that links to them so the path cannot be any more specific than it is. My computer read it fine both ways. – msnap12 Aug 13 '19 at 21:27
  • Yes, the project is hosted. Does that mean I shouold do it differently? – msnap12 Aug 13 '19 at 21:39