I used #font-face in my Web Application like this :
#font-face {
font-family: BKoodak;
src: url('../Content/Styles/ThirdParties/Fonts/BKoodakBold.eot'); /* IE9 Compatibility Modes */
src: url('../Content/Styles/ThirdParties/Fonts/BKoodakBold.eot?') format('eot'), /* IE6-IE8 */
url('../Content/Styles/ThirdParties/Fonts/BKoodakBold.woff') format('woff'), /* Modern Browsers */
url('../Content/Styles/ThirdParties/Fonts/BKoodakBold.ttf') format('truetype'); /* Safari, Android, iOS */
}
and then using it like this :
body {
line-height: 1;
font-family:BKoodak
}
what is the problem?
EDIT:In network tab(Chrome) i filter font but i find out that the browser don't get the font at all !! and in console i didn't get any 404 error!! i confused! what's wrong?
Are you sure about your file address ?
you could use this code and change file address
#font-face {
font-family: 'BKoodakBold';
src: url('fonts/BKoodakBold.eot?#') format('eot'), /* IE6–8 */
url('fonts/BKoodakBold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('fonts/BKoodakBold.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
Related
I want to host my Google Font locally. I downloaded the files from Google Webfonts Helper and uploaded to public_html/fonts. I added the given code to my theme's style.css (see below).
Then I turned on "Disable Google Fonts" in the Clearfy plugin which actually removes the gstatic and googleapis requests on GTmetrix. However, my local fonts don't show.
Purging cache and server cache doesn't help. I checked the URL of the font location in my browser, it downloads the font, so I assume the path is correct.
Any ideas where the problem could be?
#font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url('https://myurl.com/fonts/comfortaa-v28-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myurl.com/fonts/comfortaa-v28-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.woff') format('woff'), /* Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
/* comfortaa-regular - latin */
#font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 400;
src: url('https://myurl.com/fonts/comfortaa-v28-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
/* comfortaa-700 - latin */
#font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 700;
src: url('https://myurl.com/fonts/comfortaa-v28-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myurl.com/fonts/comfortaa-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.woff') format('woff'), /* Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
body{ font-family:"Comfortaa",sans-serif; }
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
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 */
}
I'm having trouble getting a font to display in Google Chrome (Version 51.0.2704.106 (64-bit))
Safari and Firefox work fine.
Here is the code I am using as an example.
#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 */
font-weight: normal;
font-style: normal;
}
I have converted the font to woff2 on multiple sites. What might the problem be?
I recently had browser issues implementing #font-face on a website. Here were some of the solutions that worked:
Try using "" instead of '' for the url and format
Try not calling .svg last
Try specifying font-weight and font-style for each #font-face reference
Did you correctly reference the font-family later in the CSS?
With all the above changes, your code might look 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.svg#svgFontName") format("svg"); /* Legacy iOS */
url("webfont.woff2") format("woff2"), /* Super Modern Browsers */
url("webfont.woff") format("woff"), /* Pretty Modern Browsers */
url("webfont.ttf") format("truetype") /* Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}
Later on in the stylesheet:
body {
font-family: "MyWebFont";
}
I am trying to load a custom font from my server but it's not retrieving the font
I am using the following code, can some body tell me the one which i'm using is in correct format.
Code :
#font-face {
font-family: trcustomfont ;
src: url( http://content.sales-accredit.com/BTGOV/Fonts/Knowledge-Regular.otf ) format("opentype");
}
.customfont {
font-family: trcustomfont;
}
You should write 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.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Or Read More About how to use custom fonts for our websites.....