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
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.
I downloaded a font and in my CSS I have :
#font-face {
font-family: "Gotham Medium";
src: url("Gotham/Gotham-Medium.otf");}
When I call say in
h1 { font-family:'Gotham Medium'}
the font display does not match what Gotham should look like. Nor is it a default font.
Is the problem a matter of something being changed when downloaded in my laptop ?
The font is not in the google API so I can't try with an external link.
Your Css should be like this :
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
css Trick
To do this you can use a generator for font-face but you must have the license for the web font
.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 am going to print one student certificate . but according to customer requirement they want "wedding text". can i use wedding text for my font ? how to use it in css ?
I have downloaded one package and used it in text editor .
<p style="font-family:'A Dark Wedding';">Akila H Joshef </p>
Step 1:
Convert you font to the uni format here.
Step 2:
Upload your new fonts to the folder of your web.
Step 3:
Use CSS #font-face. Manual here.
Step 4:
Use CSS font-family: 'MyNewWeddingFont';.
Try this
#font-face {
font-family: myFont;
src: url(font_name.extenstion);
}
div {
font-family: myFont;
}
Convert your font to all cross browser font formats using Font Squirrel
You can convert fonts and download #font-face css too.
Example #font-face CSS:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
I'm trying to import a font to website I'm making using #font-face. But it won't work on Chrome what so ever, and sometimes it works on Firefox and sometimes not.
So I have no idea what is going on.
This is what I've tried so far:
#font-face {
font-family: "Proxima Nova";
src: url('fonts/Proxima Nova.otf') format('opentype');
}
That almost worked in Firefox but Chrome didn't even want to display it, instead it showed some weird font with completely random size that had nothing to do with the css entered.
Then I tried this:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'proxnova';
src: url('fonts/ProximaNovaSemibold.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
}
This fixed sizing issues but now it doesn't show proper font anywhere. Please help.
You have to use different font formats for different browsers. Sorry about that... :(
Source: http://css-tricks.com/snippets/css/using-font-face/
#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 */
}
You can use a website like http://www.fontsquirrel.com/ to automatically generate everything you need.