@font-face declarations don't work in Android 4.3 Internet browser?
I have the same issue here how i solve it.
I only use svg on mobile with media queries.
@media only screen and (max-width: 320px) {
@font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
@media only screen and (max-device-width: 720px) and (orientation:portrait) {
@font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
@font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
Hope it's help you.
Why some fonts don't render on some android stock browsers?
The problem has been fixed. Apparently there was a bug on myfonts.com that corrupted my font files. I contacted myfonts.com and they corrected the issue right away. Then re-sent me the font files. Now everything works perfectly.
The guys at myfonts.com are amazing. Very good customer + tech support services.
Font awesome using font face
Try opening the Javascript console and adding the error messages that appear there to your question.
When I tried your code in JSFiddle, all it needed was for the maxcdn links to be SSL-based HTTPS links as opposed to insecure HTTP links.
That may be the solution to your issue, but it's hard to tell without the console error output.
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
.myClass:before {
font-family: FontAwesome;
content: "\f024";
}
Related Topics
Arrow Before and After a Box with CSS
How to Draw an Incomplete Circle with CSS and in It How to Put a Picture
Set Font Size of Angular Material Tooltip
When Specifying a 0 Value in CSS, Should I Explicitly Mark the Units or Omit
Webpack Can Not Load Font File: Unexpected Token
Set Dot Color of 'Text-Overflow: Ellipsis'
Override Jquery UI Datepicker Div Visible Strangely on First Page Load
Extend Child Div Beyond Container Div
How to Make Text Take Full Width of It's Container
Applying a Single Background Gradient to a Table Row
CSS Transform Scale, Don't Scale Child Element
Why Do /**/ Comments Work in Stylesheets But // Comments Don'T