CSS: @font-face does not work on the smartphone
Question by Guest | 2016-11-05 at 20:24
I am using an own font for symbols on my website which I have included via CSS and @font-face.
The strange thing about that is that it is working on my computer in each desktop browser well, but it is not working on my smartphone when using a mobile browser. I have tested the browsers Chrome and Firefox on my smartphone as well as on my computer.
On the computer, all characters and symbols are displayed correctly, on the smartphone, nothing works, only the default font is shown.
By now, I have tested it with several fonts and formats, but so far I could not manage to make it work. Those are my last CSS rules:
@font-face {
font-family: 'MyWebFont';
src: url('http://www.example.com/webfont.woff') format('woff'),
url('http://www.example.com/webfont.ttf') format('truetype');
}
Not with all will in the world, I can see what I am doing wrong here and in my opinion it is especially suspicious that it is only not working on mobile devices. Unfortunately, I do not have any possibility or change for reasonable debugging there. Can someone help me?
Related Topics
Fonts for Windows, Linux and Mac on the Web
Article | 0 Comments
CSS: Include CSS Stylesheets in HTML
Tutorial | 0 Comments
Reload Images, CSS, JS and Web Pages despite Browser Cache
Tip | 2 Comments
Website Performance: Deliver JavaScript and CSS files compressed to reduce loading times
Tutorial | 0 Comments
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Comment
HTML5 Canvas: Beginner Tutorial Chapter 4 - Write Text on Canvas
Tutorial | 0 Comments
Darken Background of a Website (Gray Out Effect)
Tutorial | 0 Comments
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
First, your CSS looks like as if it is correct. Also that it is working on your computer speaks for that it is not about your CSS.
However, I see that probably you are including your fonts from an external website. Some mobile browsers do not like that respectively they only like that if the Reponse Header "Access-Control-Allow-Origin" is set and thereby grants the okay for embedding.
Try to write the following into your HTACCESS file (the HTACCESS file from the website that is delivering your fonts):
With the * you say that the content (in this case your fonts respectively all files with the specified file extensions) is allowed to be requested from all pages and should never be blocked. Instead, you can of course also only specify your requesting page (the page on which you want to embed the font):
This circumstance always plays a role in case that one page A wants to use content from another page B. If page B does not allow this access with specifying an Access-Control-Allow-Origin, it may happen that the content is blocked and therefore not displayed.
2016-11-05 at 22:33