I'm trying to import a CSS font but unfortunately it's not working and I'm really unsure why.
The font in the filesystem called 'deadjim.ttf' It is placed inside my main public_html and yes it is the correct path, visiting the path downloads the file.
#font-face {
font-family: 'deadjim';
src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}
I've tried clearing my cache but this hasn't worked either. Apparently it's working on Safari but I have no means of checking having a windows PC
Make sure that you're calling the font like normal; #font-face doesn't apply any styles to the html, it just defines the font.
#Define your font
#font-face {
font-family: 'deadjim';
src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}
#Will apply the font as default on the entire page
html, body{
font-family: 'deadjim';
}
To be sure your font works in all browser / most platforms, you will need to do something similar to this (with all formats provided) - it's not enough to just have the .ttf-file.
Here's an example of including FontAwesome:
#font-face {
font-family: 'fontawesome';
src: url('fontawesome-webfont.eot?v=4.7.0');
src: url('fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Related
I am trying to embed a font and I tried it before and it works. My code was just a regular one which is accepted by other browsers.
#font-face {
font-family: KozGoPr6N;
src: url('../font/KozGoPr6N-Bold.otf') format('opentype');
src: url('../font/KozGoPr6N-Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
But then when I am trying to embed ShinGoPro it doesn't work at all.
This is my code before:
#font-face {
font-family: ShinGoPro-Bold;
src: url('../fonts/ShinGoPro-Bold.otf') format('opentype');
src: url('../fonts/ShinGoPro-bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
Then I use fontsquirrel and still it doesn't work.
#font-face {
font-family: 'a-otf_shin_go_pror';
src: url('../fonts/shingopro-regular-webfont.eot');
src: url('../fonts/shingopro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/shingopro-regular-webfont.woff2') format('woff2'),
url('../fonts/shingopro-regular-webfont.woff') format('woff'),
url('../fonts/shingopro-regular-webfont.ttf') format('truetype'),
url('../fonts/shingopro-regular-webfont.svg#a-otf_shin_go_pror') format('svg');
font-weight: normal;
font-style: normal;
}
Somehow I've been thinking if this font is not applicable for embedding but then I do need to get this font to work for my web page. Does this font cannot really be embedded in CSS? Is there anything I can do for this to work?
EDIT
My code is for crossbrowser and it doesn't work at all. I linked the file of the font so that people can try what I'm trying to do. I already tried using fontsquirrel and it doesn't work at all.
Does this font cannot really be embedded in CSS? Is there anything I can do for this to work?
^ This is referring to all browsers.
I wanna make a website with a font named SutonnyMJ.TTF (in Bangla). I tried many resources, but i failed to do this.
i use #font-face { font-family: SutonnyMJ; src: url('../fonts/SutonnyMJ.TTF'); }
#font-face {
font-family: 'SutonnyMJ';
src: url('../fonts/SutonnyMJ-webfont.eot');
src: url('../fonts/SutonnyMJ-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/SutonnyMJ-webfont.woff') format('woff'),
url('../fonts/SutonnyMJ-webfont.ttf') format('truetype'),
url('../fonts/SutonnyMJ-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
but they does not work that i want.
Is there anyone to help me please, How can i solve this?
you can probably remove a couplke lines from there and remove legacy support your site will probably work fine with just this
#font-face {
font-family: 'SutonnyMJ';
src: url('../fonts/SutonnyMJ-webfont.woff') format('woff'),
url('../fonts/SutonnyMJ-webfont.ttf') format('truetype');
}
With #font-face you loaded in a custom font but you aren't using it yet
You still have to apply it to your website
body {
font-family: 'SutonnyMJ', sans-serif;
}
I'm struggling with web fonts, I'm using DejavuSans to display Georgia ქართული text.
Unfortunately it doesn't get applied and I'm out of ideas.
#font-face {
font-family: 'DejaVuSans';
src: url('font/DejaVuSans.eot');
src: url('font/DejaVuSans.eot?#iefix') format('embedded-opentype'),
url('font/DejaVuSans.woff') format('woff'),
url('font/DejaVuSans.ttf') format('truetype'),
url('font/DejaVuSans.svg#bolnisiregular') format('svg');
font-weight: normal;
font-style: normal;
}
body
{
font-family: 'DejaVuSans' !important;
}
I downloaded it from here: http://www.fonts2u.com/dejavu-sans.font
And I applied it here: http://mac.idev.ge:800/breakmedia/
Chrome inspector tells me that css is correctly overwritten, but where are the fonts themselves??
Urls are relative to the folder containing the css file. So your url to the font needs to be absolute and point to the root e.g:
/font/DejaVuSans.eot
or relative and point to one folder up:
../font/DejaVuSans.eot
etc depending on where your stylesheet and fonts are located.
I coded a website on my mac, and i used a custom font. I defined the custom font with this font-face rule:
#font-face
{
font-family: gnuolane;
src: url('../fonts/gnuolane.otf'),
}
The problem is that the font is not loaded on any windows version of any browser. On my mac, on Safari/Chrome/FF is working perfect.
This is the website.
And this is how it is supposed to look like, when font-face is working correctly:
Thanks
LE:
I generated this code and all those files from fontsquirrel.com. Still not working. I tried with both '../fonts/gnuolane....' and '/fonts/gnuolane....'
#font-face {
font-family: 'gnuolane';
src: url('../fonts/gnuolane_rg-webfont.eot');
src: url('../fonts/gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/gnuolane_rg-webfont.woff') format('woff'),
url('../fonts/gnuolane_rg-webfont.ttf') format('truetype'),
url('../fonts/gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
Still not working tho'..
Move all your font files (the actual fonts I mean) to the same folder as your CSS file...
Then use this block of CSS. Tell me if it works. I sense it's a path issue...
#font-face {
font-family: 'gnuolane';
src: url('gnuolane_rg-webfont.eot');
src: url('gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('gnuolane_rg-webfont.woff') format('woff'),
url('gnuolane_rg-webfont.ttf') format('truetype'),
url('gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
try this
#font-face {
src: local('gnuolane'), url('/path_to/gnuolane.otf') format('truetype');
}
#font-face {
font-family: "England Hand";
src: url("fonts/englandhand.eot?#iefix") format("embedded-opentype"),url("fonts/englandhand.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
I have the above as the font style. Its included in the body of the page. I have not added the font family to a div and it renders there ohk. When I create a clone of this div and assign it another position and id, the font stops rendering.
There is also no error in the console. This error only occurs on IE 8 and works fine on IE 9 .
SOLUTION
Look out for js errors. Surely there will be one in there leading to the issue
I think your missing some prefixes for the ie8/ie9 support. Your code needs to look something like:
#font-face {
font-family: 'deutsch_gothicnormal';
src: url('deutsch-webfont.eot');
src: url('deutsch-webfont.eot?#iefix') format('embedded-opentype'),
url('deutsch-webfont.woff') format('woff'),
url('deutsch-webfont.ttf') format('truetype'),
url('deutsch-webfont.svg#deutsch_gothicnormal') format('svg');
font-weight: normal;
font-style: normal;
}