The following CSS works for me to make FontAwesome visible in all browsers, except it doesn't work for IE7. Struggling to work out how to fix it.
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot'); /* IE9 Compat Modes */
src: url('fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fontawesome-webfont.woff') format('woff'), /* Modern Browsers */
url('fontawesome-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('fontawesome-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Im not using any advanced CSS like the :before selector, Even this doesn't work:
<span style="font-family:FontAwesome;"></span>
The FontAwesome download on the GitHub site has a specific IE7 stylesheet with worked for me.
Related
I tried to get the font "Merriweather" to work in different ways:
Connection via
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital#1&display=swap" rel="stylesheet">
doesn't work;
Took the font here with the required parameters
#font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
src: url('../fonts/merriweather-v22-latin_cyrillic-regular.eot'); /* IE9 Compat Modes */
src: local('Merriweather Regular'), local('Merriweather-Regular'),
url('../fonts/merriweather-v22-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/merriweather-v22-latin_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/merriweather-v22-latin_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/merriweather-v22-latin_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/merriweather-v22-latin_cyrillic-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
}
doesn't work.
Generated .woff, .woff2, .svg and .ttf in Font Squirrel - doesn't work.
I specify the font for the tag as follows:
font-family: 'Merriweather', serif;
What could be the problem? This is the only font that does not work on iOS (Chrome, Safari) and works on Android, the other two are in order, connected in the above ways.
Found a solution, very simple, but not immediately obvious to me. Third option with Font Squirrel works if you select Custom Subsetting and check Language when creating in Expert mode.
My fonts are working on the desktop version of my website, however they don't seem to work on a mobile device.
I've tried adding some global css code but it doesn't seem to make a difference. Not sure whether there are faults in the code or not.
#font-face {
font-family: ‘Rajdhani-Medium’;
src:
url('https://donneverzekeringen.be/wp-content/uploads/2019/05/Rajdhani-Medium.eot'); /* IE9 Compat Modes */
src:
url('https://donneverzekeringen.be/wp-content/uploads/2019/05/Rajdhani-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://donneverzekeringen.be/wp-content/uploads/2019/05/Rajdhani-Medium.woff') format('woff'), /* Pretty Modern Browsers */
url('https://donneverzekeringen.be/wp-content/uploads/2019/05/Rajdhani-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://donneverzekeringen.be/wp-content/uploads/2019/05/Rajdhani-Medium.svg#svgRajdhani-SMedium') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
Does somebody notice an error in the code above or knows a reason why it isn't working on mobile? Thanks in advance!
Your first line font-family: ‘Rajdhani-Medium’; doesn't use the normal single quotes.
Replace ‘’ with ''.
.ttf fonts aren't supported in IE9 or below .Can someone suggest me something to get this fixed using css3?
Declare multiple font extensions so it will be supported by IE9?
Pseudo example code:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Use FontSquirrels generator to create those, should give you the required CSS as well.
I'm trying this code For the #fontface for an arabic font :
#font-face {
font-family: 'MothnnaFont';
src: url('fonts/mothnna.eot'); /* IE9 Compat Modes */
src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/mothnna.woff') format('woff'), /* Modern Browsers */
url('fonts/mothnna.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/mothnna.svg#svgMothnnaFont') format('svg'); /* Legacy iOS */
}
I'm using the font in a class named demo :
.demo
{
font-family:'MothnnaFont',Sans-Serif;
width:800px;
margin:10px auto;
text-align:center;
border:1px solid #666;
padding:10px;
direction: rtl;
}
This code is working on ie but it's not working on firefox 10 or chrome 17
Here is a demo http://tmr.hyperphp.com/font/demo.html
Here is how the font should look like
So anybody can help me to make this font appear a cross all browsers ?
Solved: just downloaded the font and converted it again and it's all working now
thank you all for helping
This syntax of embedding web-fonts is not bulletproof anymore.
Try using the Fontspring syntax instead:
#font-face {
font-family: 'MothnnaFont';
src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'),
url('fonts/mothnna.woff') format('woff'),
url('fonts/mothnna.ttf') format('truetype'),
url('fonts/mothnna.svg#svgMothnnaFont') format('svg');
}
It's just the first double appearance of the "src"-attribute you have to fix.
This will solve your problem.
For more information about the syntax, take a look at this source. And by the way, fontsquirrel is also using this syntax as its default.
I have the following lines in my CSS.
#font-face { font-family: Keffeesatz; src: url(/Styles/YanoneKaffeesatz-Light.otf) format("opentype") }
#font-face { font-family: KeffeesatzBold; src: url(/Styles/YanoneKaffeesatz-Bold.otf) format("opentype") }
In IE9, these show up. In IE8, it's using the fallback font, Arial. How do I get this to work in IE8?
You need to supply an EOT version of your font in order for older versions of IE to embed it. They won't recognize any other format, which is why you're observing the fallback to Arial.
Take your font to the Font Squirrel #font-face Generator and it'll prepare everything for you, including a new set of CSS #font-face rules to use over your existing ones.
Internet Explorer does not recognize your .ttf (TrueType) or .otf (OpenType) font faces in CSS3, at least not yet. IE recognizes an .eot (Embeddable Open Type).
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Take a look at here