A few months ago, my webfonts stopped worked on the iOS mail client. I'm not the only one to have experienced this.
The code I am using is this:
<link rel="stylesheet" id="magazine-font-aleo-css" href="https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo.css" type="text/css">
You can view the resulting CSS for yourself, but here's an extract:
#font-face {
font-family: 'Aleo';
src: url('aleo/Aleo-Regular-webfont.eot');
src: url('aleo/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('aleo/Aleo-Regular-webfont.woff2') format('woff2'),
url('aleo/Aleo-Regular-webfont.woff') format('woff'),
url('aleo/Aleo-Regular-webfont.ttf') format('truetype'),
url('aleo/Aleo-Regular-webfont.svg#aleoregular') format('svg');
font-weight: normal;
font-style: normal;
}
The font is then applied inline on the body tag.
<body style="background-color:#f0f0f0; color:#333; font-family:Aleo, serif; font-size:18px; font-weight:400; line-height:1.625;margin:0;">
I can't find any documentation as to what's changed on iOS. I'd be glad to receive answers that either (a) tell me what the problem is, or (b) give advice on how I can diagnose the issue.
A couple things you could try:
1. The Litmus thread you linked suggests using #import instead of <link> to reference the font files. So:
<style>
#import url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo.css);
</style>
2. I've had recent success getting web fonts to display in iOS Mail using the <link> tag, but my code looks like this:
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<!--<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700" rel="stylesheet">
<!--<![endif]-->
This hides the <link> tag from Outlook, which seems to choke on it and cause problems. I've just tested this in Litmus and it display the web font.
Another thing to check with your original code is to move as and hard-code full URLs.
<style>
#import url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo.css);
#font-face {
font-family: 'Aleo';
src: url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.eot');
src: url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.woff2') format('woff2'),
url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.woff') format('woff'),
url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.ttf') format('truetype'),
url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.svg#aleoregular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
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'm trying to embed a Persian font (BYekan) on my responsive website, and currently using the code below I've been able to achieve my goal in Chrome and Desktop Safari:
#font-face {
font-family: 'BYekan';
src: url('/font/BYekan.eot');
src: url('/font/BYekan.eot?#iefix') format('embedded-opentype'),
url('/font/BYekan.woff') format('woff'),
url('/font/BYekan.ttf') format('truetype'),
url('/font/BYekan.svg#BYekan') format('svg');
font-weight: normal;
font-style: normal;}
However, it doesn't work in iOS Safari except for numbers. I've already tried BBC Persian website's font (BBCNasim) with no luck. Any suggestions?
Edited:
This is the the website that I'm working on. And here I uploaded the font that I'm using (I downloaded them from a Persian site, and don't know how they've created the different formats of the font. Maybe they used onlinefontconverter cause it's recommended in their website). If you check my site on Desktop and iPhone, will see the difference.
Your #font-face rule looks fine.
I think you might be encountering a lack of support for characters.
Try setting the unicode range for your font to all possible unicode characters.
#font-face{
font-family: 'BYekan';
src: url('/font/BYekan.eot');
src: url('/font/BYekan.eot?#iefix') format('embedded-opentype'),
url('/font/BYekan.woff') format('woff'),
url('/font/BYekan.ttf') format('truetype'),
url('/font/BYekan.svg#BYekan') format('svg');
font-weight: normal;
font-style: normal;
unicode-range: U+00-FFFF;
}
Your font file is problematic and is not designed for Web.
Refer to this link for full description and web-friendly version download: http://www.wedesign.ir/css/css3-font-face-methods-and-optimized-font-firefox6
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.