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
Related
#font-face{
font-family: myriad;
src: url(myriadpro.ttf);
}
Can anyone tell me which extensions are valid for its usage like this?
You can use all font file format 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 */
}
This question already has answers here:
How to add some non-standard font to a website?
(21 answers)
Closed 5 years ago.
I found the most beautiful font here. I want to use it. I tried following:
#font-face {
font-family: myFirstFont;
src: url(http://fontsforweb.com/font/show/?id=78041);
}
div {
font-family: myFirstFont;
}
(Source: https://www.w3schools.com/css/css3_fonts.asp)
That is not source for font its just website where you can download it. Download font and place in folder fonts then change your code src to that path.
Download the full zip file, Extract it then put it in your project then use this code:
#font-face {
font-family: myFirstFont;
src: url(MonsieurPomme.woff);
}
div {
font-family: myFirstFont;
}
You need to download the font files and add links to the various formats, depending on which browsers you want to support:
#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 */
}
See https://css-tricks.com/snippets/css/using-font-face/ for more info.
Using font-face.
#font-face{
font-family: ((fontName));
src: url(fontname.woff);
}
Then you can call it just as how you call other fonts.
You need to directly link to the font file instead of just the webpage.
#font-face {
font-family: myFont;
src: url('font.eot'); /* IE9 Compatible Modes */
src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font.woff2') format('woff2'), /* Super Modern Browsers */
url('font.woff') format('woff'), /* Pretty Modern Browsers */
url('font.ttf') format('truetype'), /* Safari, Android, iOS */
url('font.svg#svgFontName') format('svg'); /* Legacy iOS */
}
div {
font-family: 'myFont', serif;
}
On a website that I'm developing I am able to import and display via #font-face my custom font.
It works perfectly on different browsers
In the specific what I did was:
#font-face {
font-family: 'MyCustomFont';
src: url('assets/fonts/MyCustomFont.eot'); /* IE9 Compat Modes */
src: url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('assets/fonts/MyCustomFont.woff') format('woff'); /* Pretty Modern Browsers */
}
body {
font-family: 'MyCustomFont', sans-serif;
}
The problem is that when I try to import the .ttf and .svg formats the font is not displayed anymore and the Fallback font will be applied.
This is how I imported .svg and .ttf
#font-face {
font-family: 'MyCustomFont';
src: url('assets/fonts/MyCustomFont.eot'); /* IE9 Compat Modes */
src: url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('assets/fonts/MyCustomFont.woff') format('woff'); /* Pretty Modern Browsers */
src: url('assets/fonts/MyCustomFont.ttf') format('truetype'); /* Safari, Android, iOS */
src: url('assets/fonts/MyCustomFont.svg#svgMyCustomFont') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyCustomFont', sans-serif;
}
How come is this happening?
Is possible to fix it?
Thanks in advance
Put a comma at the end of each line instead of a ";" and only define the source once.
#font-face {
font-family: 'MyCustomFont';
src: url('assets/fonts/MyCustomFont.eot'), /* IE9 Compat Modes */
url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/MyCustomFont.woff') format('woff'), /* Pretty Modern Browsers */
url('assets/fonts/MyCustomFont.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/MyCustomFont.svg#svgMyCustomFont') format('svg'); /* Legacy iOS */
}
.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 use Lobster font, and it looks completely different in two chrome/firefox/opera/safari vs internet explorer.
It doesn't work in IE8, 7
You can see example here: dev.holiday.ge/xhtml -> look at the red logo in firefox vs IE.
in:
dev.holiday.ge/xhtml/all-ie-only.css
you have:
#font-face {
font-family: 'Lobster';
src: url('fonts/DroidSans.eot');
}
this should be something like:
#font-face {
font-family: 'Lobster';
src: url('fonts/Lobster.eot');
src: url('fonts/Lobster.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
}
if you have the .eot
For best font compatibility use this syntax:
#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 */
}