This question already has answers here:
#font-face fonts not working
(2 answers)
Closed 8 years ago.
I need to set a font family in my web page with thte #font-face, but I can't make it work propertly: This is the content of my css file
#font-face {
font-family: knockout;
src: url('../fonts/knockoutHTF27.ttf');
}
body {
font-width: normal;
font-size: 20px;
font-family: knockout !important;
color: #223041;
text-align: center;
}
I've tried the same code in two diferent computers and it works pefercty in one of them but doesn't work in the other. What could be wrong?
You should try with full embedding, with all the quotation marks. It clears possible malfunctions on different browsers/OS.
#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 */
}
Then, use it like this:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
As mentioned in a previous answer, if needed, you can use http://www.fontsquirrel.com/ or one of other font-face generator services on the web, to get all needed font formats.
Try after removing ''
src: url(../fonts/knockoutHTF27.ttf);
You must use other font file format for different browesers not only .ttf, .woff, .eot. And check your path
Related
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;
}
I am trying to use a custom font in CakePHP but it doesn't seem to be working.
I am getting the font from http://www.dafont.com/ssf4-abuket.font (A Street Fighter font!!). And I store the ttf font file to webroot/css.
This is my CSS:
#font-face {
font-family: 'SF';
src: url('StreetFighter.ttf') format('truetype');
}
p {
height: 50%;
margin: 30px 0;
text-align: center;
font-size: 2.2rem;
font-family: 'SF';
color: #000;
}
However, when I use a different font such as the Arkitech from http://www.1001freefonts.com/ with the same code but different filename it works.
As you are only having a .ttf file for your font-face, not all browsers can use .ttf font files. You have to declare alternative font formats in the #font-face css.
You can generate these other font formats with an online converter. (for example: http://freedockstar.com/fontface/).
Then you need to have the following font-face declaration:
#font-face {
font-family: 'SF';
src: url('StreetFighter.eot'); /* IE9 Compat Modes */
src: url('StreetFighter.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('StreetFighter.woff') format('woff'), /* Modern Browsers */
url('StreetFighter.ttf') format('truetype'), /* Safari, Android, iOS */
url('StreetFighter.svg') format('svg'); /* Legacy iOS */
}
I've tried your font with this tool and it generates a working preview of your webfont.
I am able to display fonts in chrome, but not in firefox. I'm wondering if this is an issue because I'm using the bootstrap framework. Here's my code:
#font-face
{
font-family:"bodyFont";
src: url("http://caseymmiller.com/galapagos/fonts/museosans_300.otf");
}
body
{
margin: 0;
font-family: "bodyFont";
font-size: 15px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
Also, upon uploading it to my server, only one font is now appearing in chrome... and local sourcing wasn't working so I removed it. I am quite confused. http://caseymmiller.com/galapagos/bootstrapInvasive/Invasive.html
This is what I have in the css now. I tried what you listed before, but when sourcing both urls for each font, none of them would appear. That's why some are commented out right now. These are the sources that I want to use from now on.
#font-face
{
font-family:"headerFont";
src: url("http://livinggalapagos.org/static/Fonts/qhyts__.ttf");
/*src: url("http://livinggalapagos.org/static/Fonts/qhyts__.woff");*/
}
#font-face{
font-family:"subHeadFont";
src: url("http://livinggalapagos.org/static/Fonts/museosans_500.ttf");
src: url("http://livinggalapagos.org/static/Fonts/museosans_500.woff");
}
#font-face{
font-family:"bodyFont";
src: url("http://livinggalapagos.org/static/Fonts/museosans_300.ttf");
/*src: url("http://livinggalapagos.org/static/Fonts/museosans_300.woff");*/
}
#font-face is a complicated property. Here are some resources that might help you to code a "cross-browser" #font-face.
https://developer.mozilla.org/pt-BR/docs/CSS/#font-face
http://www.fontsquirrel.com/tools/webfont-generator
I'm wondering if you don't have a typo in 2 of your properties?
src: url('fonts/museosans_300-.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/museosans_300-.ttf') format('truetype'), /* Safari, Android, iOS */
Shouldn't these two be
src: url('fonts/museosans_300-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/museosans_300-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
Note the added webfont at the end of the file paths.
Be sure to clear your browser cache after making these changes as well.
Good luck!
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.
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.