So I am working on a WordPress website and on each page I have an H1 tag for the title of that page. I am using a special font using #font-face and it works great on windows in every browser, but when I switch over to a mac it won't display the h1 tag its just white space. I have tested this in safari and chrome on multiple mac's and its not working on any of them. If I change the font to let say Arial it works great, if I setup to have a fall back font it does not work. If I change the h1,h2,h3 tags to use NorthBergen-Light it works great, its just the NorthBergen that doesn't work and the code for both of them is the exact same. In my research I have found that some people say they have had success when they remove all of the quotes but when I do that it just breaks everything. I can't figure out why NorthBergen-Light works great but NorthBergen does not.
#font-face {
font-family: 'NorthBergen';
font-style: normal;
src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot');
src: local('NorthBergen'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.woff') format('woff');
}
#font-face {
font-family: 'NorthBergen-Light';
font-style: normal;
src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot');
src: local('NorthBergen-Light'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.woff') format('woff');
}
.services .services-inside .services-title{
font-family: 'NorthBergen' !important;
}
h1, h2, h3{
font-family: 'NorthBergen', 'Times New Roman', 'Times', 'serif' !important;
}
footer.main-footer .widget .widget-title{
font-family: 'NorthBergen-Light' !important;
}
h5, h6, p, blockquote, li, a, .main-container, h4.widget-title, .widget-title{
font-family: 'NorthBergen-Light' !important;
}
So I got it to work by using fontsquirrel and taking all the files and putting them in my FTP and changing the css file to look like.
#font-face {
font-family: 'NorthBergen';
font-style: normal;
src: url('ufonts.com_northbergen-regular-opentype-webfont.eot');
src: url('ufonts.com_northbergen-regular-opentype-webfont.eot?#iefix') format('embedded-opentype'),
url('ufonts.com_northbergen-regular-opentype-webfont.woff2') format('woff2'),
url('ufonts.com_northbergen-regular-opentype-webfont.woff') format('woff'),
url('ufonts.com_northbergen-regular-opentype-webfont.ttf') format('truetype'),
url('ufonts.com_northbergen-regular-opentype-webfont.svg#northbergenregular') format('svg');
}
Dont know anything about Wordpress, but you might need some conversion of font for all browsers:
#font-face {
font-family: 'Min_font';
src: url('../fonts/Min_font/Min_font.eot') format('embedded-opentype'); /* IE9 + later */
src: url('../fonts/Min_font/Min_font.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8 */
url('../fonts/Min_font/Min_font.woff') format('woff'), /* Newer browsers */
url('../fonts/Min_font/Min_font.ttf') format('truetype'), /* Safari og iOS, Chrome, Android, Firefox and Opera except Opera Mini */
url('../fonts/Min_font/Min_font.svg#Min_font + regular, italic, bold) format('svg'); /*IE og iOS earlier than version 5*/
}
Try fontsquirrel: http://www.fontsquirrel.com/tools/webfont-generator
I realize that this question was from several years ago - but I used this thread as a reference when figuring out the solution, so I figured I'd share here to save others future frustration --
For me, all of the fonts were working EXCEPT on my iphone and what I had to do was to remove the ID in the svg portion of the font-face code and leave it as just the uploaded .svg file.
For example in the above code, the svg portion would read:
url('../fonts/Min_font/Min_font.svg, italic, bold) format('svg');
meaning I deleted the "#" and the ID after it.
I tried everything else - fontsquirrel, transfonter, changed the url path numerous ways.
That was the only one that worked - and it took me a week to figure it out :0
It may be the only thing that works for you, too.
My issue was related to something different, so I hope this helps someone. In my case, the font-face code was like:
#font-face {
font-family: 'My Font';
src: url('My-Font.woff2') format('woff2'),
url('My-Font.woff') format('woff');
font-weight: normal;
font-style: italic;
}
and I had all of my heading tags using this:
h1, h2, h3, h4, h5, h6 {
font-family: 'My Font';
}
Most browsers/user-agents apply font-weight:bold or a font-style:normal in some cases.
Even with this, my font still rendered correctly on Chrome/FF/Edge. It was only until I got on iOS did I notice the font didn't render correctly. I guess they are more strict about this.
Changed my CSS to:
h1, h2, h3, h4, h5, h6 {
font-family: 'My Font';
font-weight: normal;
font-style: italic;
}
In my case, the TTF file dictated the font-style and font-weight properties that Transfonter ended up applying. I just had to make sure those were the same in the CSS declaration on the element the font was being applied to. Your case may be different, but it is important to check for those discrepancies.
Started working for me after changing path.
The path fontsquirrel gave didn't had ./
After adding it, it works:
#font-face {
font-family: 'montserratblack';
src: url('./montserrat-black-webfont.woff2') format('woff2'),
url('./montserrat-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Is there any difference between these two structures?
With http://
#font-face {
font-family: 'nexa-boldregular';
src: url('http://example.com/fonts/nexa_bold_webfont.eot');
src: url('http://example.com/fonts/nexa_bold_webfont.eot?#iefix') format('embedded-opentype'), url('http://example.com/fonts//nexa_bold_webfont.woff') format('woff'), url('http://example.com/fonts//nexa_bold_webfont.ttf') format('truetype'), url('http://example.com/fonts//nexa_bold_webfont.svg#nexa_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
Without http://
#font-face {
font-family: 'nexa-boldregular';
src: url('//example.com/fonts/nexa_bold_webfont.eot');
src: url('//example.com/fonts/nexa_bold_webfont.eot?#iefix') format('embedded-opentype'), url('//example.com/fonts//nexa_bold_webfont.woff') format('woff'), url('//example.com/fonts//nexa_bold_webfont.ttf') format('truetype'), url('//example.com/fonts//nexa_bold_webfont.svg#nexa_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
If so, please explain.
Also: it appears from my testing that Chrome can read either one of these structures but Firefox cannot.
The // form without http: is called a protocol (or scheme) relative URL.
If the link starting with // is added to an http page (or css file fetched via http), the font will be fetched via http, while if the link is added to a https page, the font will also automatically be fetched via https.
I am using #font-face to load the fonts I host on my server and use for a website I am currently developing. The fonts are working fine everywhere except on iOS devices (iPhone, iPad). When I test the website on online iOS devices simulators, like ipadpeek.com, it works fine but when testing them on the website itself it's not working.
This is how I embed my fonts using #font-face
#font-face {
font-family: 'droid_arabic_kufiregular';
src: url('css/fonts/droidkufi-regular-webfont.eot');
src: url('css/fonts/droidkufi-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('css/fonts/droidkufi-regular-webfont.woff') format('woff'),
url('css/fonts/droidkufi-regular-webfont.ttf') format('truetype'),
url('css/fonts/droidkufi-regular-webfont.svg#droid_arabic_kufiregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'droid_arabic_kufiregular';
src: url('css/fonts/droidkufi-blod-webfont.eot');
src: url('css/fonts/droidkufi-blod-webfont.eot?#iefix') format('embedded-opentype'),
url('css/fonts/droidkufi-blod-webfont.woff') format('woff'),
url('css/fonts/droidkufi-blod-webfont.ttf') format('truetype'),
url('css/fonts/droidkufi-blod-webfont.svg#droid_arabic_kufiregular') format('svg');
font-weight: bold;
font-style: normal;
}
Any clues?
Did you use FontSquirrel to convert your font?
See if the fix in this post helps:
http://blog.echoenduring.com/2011/12/01/quick-tip-svg-fonts-font-face/
I am encountering a weird problem when printing a site using IE8. The problem occurs after the print (or print-preview) dialog box closes, the web page goes entirely blank (white) even though the page prints fine. Refreshing fixes the issue.
I have recently included a print stylesheet which has #font-face declarations. Removing the #font-face declarations stops the issue from occurring. My font-face declarations are as follows:
#font-face {
font-family: 'FONT';
font-weight: normal;
font-style: normal;
src: url('../fonts/FONT.eot');
src: url('../fonts/FONT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/FONT.woff') format('woff'), /* Modern Browsers */
url('../fonts/FONT.ttf') format('truetype'); /* Safari, Android, iOS */
}
I've tested this in IE7, IE8, IE9 and recent versions of Safari, Chrome & Firefox. The problem only happens in IE8.
Has anyone else experienced this and know a solution?
I had the same issues as you. Got lucky and found out that the issue is caused by the relative path in the urls of your font files! To fix your IE8 page-goes-blank problem after print or print preview, just replace your relative '../fonts/FONT.eot' paths with absolute paths. In my case, we keep our fonts in /inc/css/fonts. So I would update my url paramters to something like
#font-face {
font-family: 'FONT';
font-weight: normal;
font-style: normal;
src: url('/inc/css/fonts/FONT.eot');
src: url('/inc/css/fonts/FONT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/inc/css/fonts/FONT.woff') format('woff'), /* Modern Browsers */
url('/inc/css/fonts/FONT.ttf') format('truetype'); /* Safari, Android, iOS */
}
Again, I had the same problem as you where the issue only happens in IE8 (compat mode off). It's a problem we had to solve because, even as of August 2012, 40% of our web users are still in IE8. Hope this helps!
In my rails(2.x) application. I want to use custom font in my view. So that I added the font files in public under fonts folder. When I try to get the fonts in url or via application, it through routing error. I guess rails routes not able to recognize the format/file. Correct me if I am wrong and give me solution
css code:
#font-face {
font-family: 'Effra';
src: url('/fonts/effra_std_rg-webfont.eot');
src: url('/fonts/effra_std_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/effra_std_rg-webfont.woff') format('woff'),
url('/fonts/effra_std_rg-webfont.ttf') format('truetype'),
url('/fonts/effra_std_rg-webfont.svg#EffraRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Note: I can able to get woff, ttf file by directly typing the path but not eot file.
Error trace:
Unknown action
No action responded to fonts. Actions: XXXXXXsomeactionsXXXXX and rescue_404
Thanks in advance,
Arun.
I fixed the above issue by moving the font folder under public/stylesheets/fonts. and made the above code as below.
font-face {
font-family: 'Effra';
src: url('fonts/effra_std_rg-webfont.eot');
src: url('fonts/effra_std_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/effra_std_rg-webfont.woff') format('woff'),
url('fonts/effra_std_rg-webfont.ttf') format('truetype'),
url('fonts/effra_std_rg-webfont.svg#EffraRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Hope this will help to others.