Custom Fonts won't appear. Ran through MIME, Functions, and Font Family. No luck

Question

Working with a WordPress site. I can plug the font link into my browser's url bar and the font auto downloads so I believe it is linked correctly.

I have all custom fonts in a separate stylesheet in my custom fonts folder which I used @import to link to, they appear in my browser source so I think that checks out. For now, while troubleshooting, I put a single font directly in my main Child Theme CSS file. I'll include that code below.

 @font-face {
   font-family: 'Blackout Sunrise';
   scr: url('blackout_sunrise-webfont.eot');
   scr: url('blackout_sunrise-webfont.eot?#iefix') format('embedded-opentype'),
     url('blackout_sunrise-webfont.woff') format('woff'),
     url('blackout_sunrise-webfont.ttf') format('truetype'),
     url('blackout_sunrise-webfont.svg') format('svg');
   font-weight: normal;
   font-style: normal;
 }

I've spent all day reading and watching videos trying to learn what the issue could be. That lead me to MIME. I added custom MIME types in my hosting Apache & nginx settings. I also added these same MIME types at the top of my .htaccess file in what I believe to be my website's root directory, right above "# BEGIN WordPress". Here is how I added them in both locations:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
AddType image/svg+xml svg
AddType image/svg+xml svgz

Didn't have any luck. In one forum they said you may need to add new MIME type support in functions.php so I added this code below into my child theme:

  function my_myme_types($mime_types){
    $mime_types['eot'] = 'application/vnd.ms-fontobject'; //Adding avi extension
    $mime_types['ttf'] = 'font/ttf';
    $mime_types['otf'] = 'font/otf';
    $mime_types['woff'] = 'application/x-font-woff';
    $mime_types['svg'] = 'image/svg+xml';
    $mime_types['svgz'] = 'image/svg+xml';
    return $mime_types;
  }
  add_filter('upload_mimes', 'my_myme_types', 1, 1);

Still nothing. I don't know what to try next or where I may have gone wrong. Spent 8 hours today trying to figure this out. I am working with a child theme. Is the .htaccess in the right place, do I need to create a new one? If I find a solution I'll post tomorrow. Any help would be greatly appreciated. (thought this would be the easy part)

8/27/16 - progression.

Explored more today. I moved my fonts around to lessen chances of file path errors. Some forums use quotations inside the url's parenthesis and others did not. I tried both. One forum brought attention to the file's "read and write" privileges. "me" had read-write privileges and I changed "staff" to have read-write privileges as well, leaving "everyone" to read-only as the forum suggested. I then reuploaded files to the server. Didn't fix issue.

This was a great article: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

I hadn't declared a svg #id in my @font-face and they use a different technique combating IE that seems like it could be more efficient. Here is where I'm at now:

@font-face {
  font-family: 'Blackout Sunrise';
  scr: url('type/blackout_sunrise-webfont.eot');
  scr: local("☺"),
    url('type/blackout_sunrise-webfont.woff') format('woff'),
    url('type/blackout_sunrise-webfont.ttf') format('truetype'),
    url('type/blackout_sunrise-webfont.svg#BlackoutSunrise') format('svg');
  font-weight: normal;
  font-style: normal;
}

.practice-font h3 {
  font-family: 'Blackout Sunrise';
  color: #8b0000;
  text-transform: uppercase;
  border: 1px solid green;
  letter-spacing: 3px;
}

I also discovered that I may have name the MIME wrong due this information: http://www.jbarker.com/blog/2009/mime-type-css-web-fonts

So I uploaded these two new MIME types in addition to the above MIME types in my hosting Apache & nginx settings and root htaccess file.

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf 

Forums have talked about slow load speeds with custom fonts and if the browser takes too long then they load default fonts in their place. Don't know how to check that.

I uploaded a google font and worked with typekit and got those working in a few minutes. Still have no idea what I'm doing wrong with these @font-faces

Answer 1

scr: url('blackout_sunrise-webfont.eot');
scr: url('blackout_sunrise-webfont.eot?#iefix') format('embedded-opentype')

Pay attention to scr. There should be src

But, it could be just first issue.