I can't seem to get my #font-face to work at all, neither locally or when previewing in browser. my CSS is as follows:
#font-face {
font-family: chopin-script.regular;
src: local('chopin-script.regular'),
url('/fonts/chopin-script.regular.ttf') format('truetype');
}
My folder structure:
HTML: Site folder > HTML files
CSS: Site folder > CSS folder > CSS files
Fonts: Site folder > Fonts folder > Font files
I have been through all the other similar questions, and as far as I know, I've done everything that's been said, and to no avail, apologies if there is something I haven't tried somewhere that I'm not seeing. I have tried this same code with an .otf version of the font too.
regards.
Edit:
I used FontSquirrel to generate the font, and installed it as so:
#font-face {
font-family: 'ChopinScript';
src: url('/fonts/ChopinScript.eot');
src: url('/fonts/ChopinScript.eot?#iefix') format('embedded-opentype'),url('/fonts/ChopinScript.woff') format('woff'), url('/fonts/ChopinScript.ttf') format('truetype'), url('/fonts/ChopinScript.svg#webfont') format('svg');
}
It now displays correctly locally, but when previewing it in Firefox and IE it still doesn't show. However, it does work in Chrome. They're the only browsers I have installed.
Sorry to post this as an answer but I can't comment. Are you allowed dots in the name of fonts without needing quotes? I usually put quotes around it if it has spaces or dots to ensure the name is alright with CSS. Try it as font-family: 'chopin-script.regular'; and see if there's any difference.
Related
I have downloaded on my computer a .ttf file containing the font I want to use. What I would like to do is to apply it to my html page. I am using a separate .css stylesheet to which there's a link inside the head section of my html file.
How exactly do I apply this custom font? I tried using
#font-face and I have the following code in my .css file, but it won't work:
#font-face {
font-family: "chosenNameForCustomFont";
src: url("fonts/customFontName");
}
p {
font-family: chosenNameForCustomFont;
}
The paragraphs in the html file will still be normal, without the font.
If I put the above code inside the actual html file, within "style" tags, it works. What am I doing wrong then?
Generally when I need to do this I use the fontsquirrell generator. You need to upload the font you need to use and it will generate an example to use it.
After you generate the font kit you'll get a bundle with several files:
font_name.eot
font_name.svg
font_name.ttf
font_name.woff
font_name.woff2
font_name-demo.html <-- Open it
stylesheet.css
After you open the .html you'll see your font perfectly working in the sample page. You need to copy all those files (.eot, .svg, .ttf, .woff, .woff2) into your source folder and reference those in your .css (may be you'll need to edit the directory depending on where you put the font files) as the stylesheet.css does:
#font-face {
font-family: 'font_name';
src: url('/relative/path/font_name-webfont.eot');
src: url('/relative/path/font_name-webfont.eot?#iefix') format('embedded-opentype'),
url('/relative/path/font_name-webfont.woff2') format('woff2'),
url('/relative/path/font_name-webfont.woff') format('woff'),
url('/relative/path/font_name-webfont.ttf') format('truetype'),
url('/relative/path/font_name-webfont.svg#fontnameregular') format('svg');
font-weight: normal;
font-style: normal;
}
Remember the fonts you are using need to be legally eligible for web embedding.
Hope it helps
I'm using a web font from FontSquirrel, that provided the webfont kit. I currently have the files in the root folder of "StilettoRedBand.com" but in my Storenvy page (stilettored.storenvy.com) the webfont isn't working in the title, or the footer.
I've been working on this project so much that I've appeared to have missed something and am having a hard time locating the issue, as it was working at first and then just stopped.
Can anyone help me out?
Here's the font source: http://www.fontsquirrel.com/fonts/WC-Mano-Negra-Bta
try that
#font-face {
font-family:WCManoNegraBta;
font-weight:bold;
src:url("path-to-the-font-file/WCManoNegraBta.otf") format("opentype");}
div {
font-family:WCManoNegraBta;
}
You need to make sure you got all the needed font-files (.eot, .ttf, .woff and .svg). Click the "Webfont kit" tab and download the whole package. Use this code and make sure your links are correct. You should also try removing 'text-rendering: optimizeLegibility;' if you are using this.
#font-face {
font-family: 'WCManoNegraBtaRegular';
src: url('WCManoNegraBta-webfont.eot');
src: url('WCManoNegraBta-webfont.eot?#iefix') format('embedded-opentype'),
url('WCManoNegraBta-webfont.woff') format('woff'),
url('WCManoNegraBta-webfont.ttf') format('truetype'),
url('WCManoNegraBta-webfont.svg#WCManoNegraBtaRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I am having the same issue with firefox for my storenvy store. Here is the fix I found:
How to add an Access-Control-Allow-Origin header
You just need the following code in a .htaccess file in the same folder as your fonts:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
I haven't gotten it to work yet, but my website is hosted on godaddy so I don't know if my issue is related to that or not.
Good luck!
I was having the same problem! After reading this article I ended up getting the font to work for me.
What I did was add the #font-face code into my hosting site and saved it as a.css file
Example: http://lovepollution.com/andadrifont.css
Then I went to the theme section and clicked "css mode". I added below on the style sheet.
#import url('http://lovepollution.com/andadrifont.css');
Saved and works now.
This is quite confusing to me. I am using font-squirrel to download a web kit to show a custom font. here is the link to font: http://www.fontsquirrel.com/fontfacedemo/League-Gothic
If you look at the homepage right now: http://www.simonsayswebsites.com/
the main text in the middle says "Custom Built Websites Designed To Get You More customers". It looks great in chrome, exactly as it should, but if you look at it in either firefox or IE, the custom font face does not work.
Here's the CSS generating the font-face:
#font-face {
font-family: 'LeagueGothicRegular';
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Anyone have any ideas? I looked at many cases on this all ready, but I don't see one that relates to my case as I thought I have included all the different necessary files for each browser and have them uploaded to their respected places.
Poking around I found this interesting tidbit for Firefox:
Same-origin rule: By default, Firefox will only accept relative links. If you want to use absolute links or include fonts from different domains, you need to send these fonts with Access Control Headers.
Try changing those font URLs to relative and see if that helps:
#font-face {
font-family: 'LeagueGothicRegular';
src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
url('/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
url('/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
edit: see Korpela's answer; the problem was the mismatch from the 'www' subdomain. You should probably keep the URLs relative, though.
The reason for the problem is (was) the use of a font across domains. A URL that starts “http://simonsayswebsites.com” is treated as being in a different domain than “http://www.simonsayswebsites.com” even though the two domain names may refer to the same computer.
Switching to a relative URL helped because then the domain is the same. But despite rumors to the contrary, Firefox does not reject absolute URLs in #font-face. I have set up a trivial demo to show this.
Presumably, the rumors have originated from cases like this: if switching to a relative URL helps, it is natural to assume that the type of URL was the issue.
I had your problem too and searched a lot about it but came up with nothing...
so i started experimenting on my CSS for some minutes and finally realized that i had duplicated font family names, I had been declaring below code in both my theme and layout page:
<style type="text/css" media="screen, print">
#font-face
{
font-family: 'foo';
src: url('~/Assets/fonts/foo.woff') format('woff'),
url('~/Assets/fonts/foo.ttf') format('truetype'),
url('~/Assets/fonts/foo.eot') format('eot');
}
</style>
I just needed to remove one of them and my code worked fine in all three browsers!
one more point is that just removing the line containing "font-family: 'foo';" parts will do the trick!
I have set up a website. I was hosting it on webs.com, but they started to place an ad bar on html-only hosting. As it would not look good, I changed it to 000webhost. Since I uploaded everything to 000webhost, I can't make the fonts to load.
webs:
http://bluescreen-ofdeath.webs.com/
000webhost:
http://bsod.comze.com/
I have tried pointing the ttf fonts from my webs account, but it won't load.
As the 000webhost take a day to answer free accounts, I decided to ask you. Is there anything I am missing?
Edit: Here is an example of my #Font-face
#font-face {
font-family: 'fixedsys500c-webfont';
src: url('../font/fixedsys500c-webfont.eot');
src: url('../font/fixedsys500c-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/fixedsys500c-webfont.woff') format('woff'),
url('../font/fixedsys500c-webfont.ttf') format('truetype'),
url('../font/fixedsys500c-webfont.svg#fixedsys500c-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
The font(s) have to be imported before the stylesheet, as Google Web Fonts dictate.
Instructions: To embed your Collection into your web page, copy the
code as the first element in the <head> of your HTML document.
Don't use single quotes. Your fonts will work nicely. It's so easy, look below:
#font-face {
font-family:Arial;
src:url(Arial.ttf)format(.ttf);
}
remind it, internet explorer only works with EOT font files.
As far as I can tell, 000webhost only accepts .woff files.
.ttf and .eot do not work for me
I've built a custom wordpress theme that uses font-face for typography. All works fine when running in localhost, but after uploading the theme to a live site, font-face fails in FF. Still works fine in IE9
I've tried hardcoding the CSS link in header.php, moving the font files out of the theme to the site root, using a separate stylesheet for the #font-face declaration, but nothing wants to work.
Any ideas?
Cheers
Nathan
Did you include all the font files necessary? Different browsers support different types. For example, here's one I used on a site recently:
font-face {
font-family: 'GentiumBookBasicRegular';
src: url('_/fonts/GenBkBasR-webfont.eot');
src: url('_/fonts/GenBkBasR-webfont.eot?#iefix') format('embedded-opentype'),
url('_/fonts/GenBkBasR-webfont.woff') format('woff'),
url('_/fonts/GenBkBasR-webfont.ttf') format('truetype'),
url('_/fonts/GenBkBasR-webfont.svg#GentiumBookBasicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
A fantastic resource for this is http://fontsquirrel.com - they'll even let you upload fonts that they don't have and they'll create the package and the css for you.