Hi Im having some trouble viewing the custom font on ios, ive followed the comments here #Font-face not working on mobile but don't seem to be having any joy
I have uploaded this
#font-face {
font-family: 'CeraPro';
src: url('CeraPro.eot'); /* IE9 Compat Modes */
src: url('CeraPro.eot?#iefix') format('embedded-opentype'),
url('CeraPro.woff2') format('woff2'), /* Super Modern Browsers */
url('CeraPro.woff') format('woff'), /* Pretty Modern Browsers */
url('CeraPro.ttf') format('truetype'), /* Safari, Android, iOS */
url('CeraPro.svg#svgCeraPro') format('svg'); /* Legacy iOS */
}
the website is arcade78.com
Related
I recently decided to load my font locally for performance purpose. I tried a bunch of script or solution like webfont.js but a couple of days ago I discovered "google-webfonts-helper".
It's a really interesting project and it is hosted on github. Essentially you choose your font, download them and that's it. So far so good except for one problem: I'm not sure it works properly.
So that's my effort, let's say that I want to use "open sans" as a font.
I'm on a wordpress environment, so I.
go to the website -> https://google-webfonts-helper.herokuapp.com/
download the folder with my fonts and put in my fonts folder (I'm in a wordpress environment).
Past and copy the css
CSS:
/* open-sans-300 - latin */
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'),
url('../fonts/open-sans-v16-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-300italic - latin */
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
url('../fonts/open-sans-v16-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-regular - latin */
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('../fonts/open-sans-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-italic - latin */
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'),
url('../fonts/open-sans-v16-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600 - latin */
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
url('../fonts/open-sans-v16-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600italic - latin */
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
url('../fonts/open-sans-v16-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('../fonts/open-sans-v16-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700italic - latin */
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
url('../fonts/open-sans-v16-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v16-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
and my fonts are in the folder:
/public_html/wp-content/themes/myfolder/fonts
Everything easy except for the fact that, when I load my font, only some of them are loaded:
And that's the most problematic part because it is really hard to debug.
Essentially, it loaded only some fonts, not all of them.
And I didn't find any console error and they seem the same so it was impossible to understand what went wrong.
Any thoughts?
I expect that the main problem is that the Open Sans font is not available to your terminal, which is what the local code references. Even if the font is saved on your terminal, it will only be available to the page (locally) if it is activated in the terminal's operating system.
You are not incorrect to use the local reference in your link, because it will greatly reduce your load time... but only if the user has that font loaded on their personal terminal. It appears that the herokuapp assumes this as a best practise as well.
What you likely want to do, is to point the website first to the local fonts, and then successively to the font files stored on your server. Like so:
#font-face {
font-family:'Open Sans';
font-style:normal;
font-weight:300;
src: url('Open_Sans/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
src: local('Open Sans Light'), local('OpenSans-Light'),
url('Open_Sans/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('Open_Sans/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('Open_Sans/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
url('Open_Sans/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('Open_Sans/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
This will tell the user's browser to first look for the font file locally – and if it fails to find a matching file – to then look for the file on your website's server. The browser will iterate through this list in order, starting from the local reference at the top of your list, and then proceeding through the url references if the order that you list them in your code.
The browser doesn't load all of the font files. I'm not sure who among us are privy to the "load order" choices that the various browser development companies have made. I doubt, however, that these choices were arbitrary or idiosyncratic. I would guess that it is fastest first, or most-compatible first; whichever makes the most logical sense. I have to assume that it will skip over any font file it deems to be incompatible. Because of this, you will note that my code above includes fallback options for maximum compatibility of browser and font file. I've commented in some labels to illustrate this.
Hoping that this helps you out.
Lastly, the herokuapp is awesome, I agree.
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;
}
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
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!