Work with WordPress site. I can connect the font link in my browser url bar and download the fonts, so I believe that it is connected correctly.
I have all the custom fonts in a separate stylesheet in my custom font folder that I used @import to communicate with, they appear in my browser source, so I think this checks. For now, despite troubleshooting, I put one font directly in the main Child Theme CSS file. I will include this 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 read and watched the video all day trying to find out what the problem was. This led me to MIME. I added custom MIME types in my Apache and nginx hosting settings. I also added the same MIME types at the top of my .htaccess file in what I think is the root directory of my site, right above "# BEGIN WordPress". Here is how I added them in both places:
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
Bad luck. In one of the forums, they said that you might need to add new support for the MIME type in functions.php, so I added this code below to 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 do not know what to try next or where I may have made a mistake. Spent 8 hours today trying to figure it out. I work with a children's theme. Is .htaccess in the right place, do I need to create a new one? If I find a solution, I will ship tomorrow. Any help would be greatly appreciated. (thought it would be the easy part)
8/27/16 - progression.
Learned more today. I moved my fonts to reduce the chance of errors in the file path. Some forums use quotes in URL brackets, while others do not. I tried both. One forum drew attention to read and write privilege files. "I" had read and write privileges, and I changed the "state" to have read and write permissions, leaving "everyone" read-only, as suggested by the forum. Then I reloaded the files to the server. Do not fix the problem.
This was a great article: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
I did not declare svg #id on my @ font-face, and they use a different method to deal with IE, which seems to be more efficient. This is where I am 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 found that I might call MIME incorrect due to this information: http://www.jbarker.com/blog/2009/mime-type-css-web-fonts
So, I added these two new MIME types in addition to the above MIME types in the Apache and nginx hosting settings and in the root htaccess file.
AddType application/vnd.ms-fontobject .eot AddType application/octet-stream .otf .ttf
The forums talked about slow download speeds with custom fonts, and if the browser takes too long, they download the default fonts instead. I don’t know how to check it.
I downloaded the google font and worked with typekit and got the job done in a few minutes. Still don't know what I'm doing wrong with these @ font faces