Just tried to use a new font, put it in a folder and linked to it, but I am getting this:
GET http://localhost/mywebsite/fonts/garamond/EBGaramond12-Regular.ttf
403 (Forbidden)
I implemented it like so:
#font-face {
font-family: Garamond;
src: url(../fonts/garamond/EBGaramond12-Regular.ttf);
text-rendering: optimizeLegibility;
}
The path is correct, but I'm not sure why I get a 403. I am using XXAMP on OSX, other fonts work fine.
GET http://localhost/mywebsite/fonts/garamond/EBGaramond12-Regular.ttf 403 (Forbidden)
Is a sign for a file permission problem.
You can get the file permissions by ls -l in the terminal. Changing them by chmod to 777 should work. Later on you can change them back to a lower permission for security.
Try by removing the starting double dots and slash in the font path.
Like this:
#font-face {
font-family: Garamond;
src: url(fonts/garamond/EBGaramond12-Regular.ttf);
text-rendering: optimizeLegibility;
}
The ../ needed only if your fonts directory is outside of the project directory or your styles file is located in a subdirectory instead of project root.
On other hands, it might be the mime types issue.
See this help for that: Why is #font-face throwing a 404 error on woff files?
Related
I am creating some text in html and I've tried using #fontface, which of course work.
The problem is how could I import fonts from my ftp server. I don't really get what path or something like this should be in url in #fontface
The simplest way is to add your fonts somewhere in the path of your web server (where html pages are located) so your font-face will be something like:
#font-face {
font-family: "Open Sans";
src: url("/path/to/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/path/to/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
I'm trying to get my icons to work locally on my machine without the use of a server and I'm getting the following for one out of three files giving this kind of error in the console of Firefox only (it works on all of the other browsers).
downloadable font: download failed (font-family: "FontAwesome"
style:normal weight:normal stretch:normal src index:1): bad URI or
cross-site access not allowed source:
file:///C:/Users/jester/Documents/Projects/assets/fonts/fontawesome-webfont.woff2?v=4.7.0
Here is what I have in my index.html file to call the css:
<link rel="stylesheet" href="../assets/css/font-awesome.min.css" type="text/css">
And this is what exists in the css file for the appropriate error from the console:
#font-face{
font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal
}
I'm going to state the obvious things I've tried with some of them being ridiculous, but thought I should try every thing I read about this. I tried using double quotes instead of single quotes, removing the query string after the .woff2 file, and even added a semicolon to the end of the font-style. I'm not sure exactly what needs to be done, but almost everyone who had an issue locally was able to add something onto their Apache servers. I don't have that, so what's the problem here?
I've got a problem with fonts, exactly with "#font-face".
When i tried to run this local HTML page, all fonts worked, but now when i try to run online HTML page, only one font is working.
now i have two fonts, one work, and one other doesn't
CSS :
#font-face {
font-family: 'RemachineScript';
src: url(fonts/SCRIPTIN.ttf);
}
#font-face {
font-family: 'Quicksand';
src: url(fonts/Quicksand.otf);
}
header#subheader div.title {
font-family: 'RemachineScript';
}
header#subheader p.subheader {
font-family: 'Quicksand';
}
You can see the HTML at http://gspinaci.com/
The URLs are right, because they are in the same folder. What can I do?
The console says there is no Quicksand.otf file, be sure of two things, first, that the file is there and the name is exactly the same (case sensitive) and the second this is that your font-face call is very specific, use the webkit font that you can download from font squirrel here: http://www.fontsquirrel.com/fonts/Quicksand
and be sure to paste in you CSS file the WHOLE font-face call, like this:
#font-face {
font-family: 'triplex';
src: url('fonts/triplexsans-light-webfont.eot');
src: url('fonts/triplexsans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/triplexsans-light-webfont.woff') format('woff'),
url('fonts/triplexsans-light-webfont.ttf') format('truetype'),
url('fonts/triplexsans-light-webfont.svg#triplexlight') format('svg');
font-weight: normal;
font-style: normal;
}
And remember to include all font format files, not only .otf.
EDIT
You do not need to configure your server, you only need to modify your .htaccess file, add this lines to it:
AddType application/vnd.ms-fontobject eot
AddType font/opentype otf
AddType font/truetype ttf
AddType application/x-font-woff woff
check this answer: #font-face issue
What you have in accepted answer is not nearly close to bulletproof;)
you can also try out my little converter http://freedockstar.com/fontface/
also i'm not sure if you need to set mime types for fonts. It works just fine from my server without it. Every font is server as text/html and there are no problems. you define type in css, and that seams to be enough ;)
you need to add:
format (truetype)
or
format (opentype)
or someone else after src attribute
#font-face{
font-family: 'RemachineScript';
src: url(fonts/SCRIPTIN.ttf) format (truetype);
}
you can find format type in fonts ttf file
Maybe is too late, but for the record... I solved this issue by granting read permission on the .ttf file.
chmod +r font.ttf
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.
I am building a website and I attempting to get cross-browser compatibility with a free font named Tex Gyre Cursor.
So far I have tried several ways which I have found searching though Google.
Site 1, Site 2 & Site 3
They have worked when testing them locally on Chrome, Firefox, Safari and Opera. Not on IE though. I'm not to bothered about IE since it's a massive pain in the arse and I have set Tahoma as the back-up font for this.
The problem arises after I have uploaded my files via FTP File Manager. The web host is GoDaddy.
I have uploaded the font files too.
I visit the site but the font is Tahoma, this occurs on all browsers previously mentioned.
I'm at my wits end and cannot discern the problem.
This was my first attempt with the CSS:
#font-face{
font-family:'TexGyreCursor';
src: url('fonts/texgyrecursor.eot');
src: local('texgyrecursor'),
local('texgyrecursor'),
url('fonts/texgyrecursor.ttf') format('truetype'),
url('fonts/texgyrecursor.svg#font') format('svg'),
url('fonts/texgyrecursor.otf');
}
My second attempt:
#font-face{
font-family:'TexGyreCursor';
src: url('fonts/texgyrecursor.eot');
src: url('fonts/texgyrecursor.otf');
}
If anymore information is needed please let me know :)
I recently had this issue, I was designing on windows machine with xampp and uploading to linux server.
I finally figured out that the font files were CamelCase and the css code was all lowercase.
It didn't bother my local machine, but linux sees CAPITALS.font and capitals.font as 2 seperate files.
You might want to check to see if that is issue your having.
I have come across many font embedding issues, whether it's hosting the fonts and CSS file on a different server or IE being an absolute !#?#.
In IE, press 12 which will bring up your developer tools and check to see what error is shown (if any). If you're being shown any of the following errors:
CSS3111: #font-face encountered unknown error.
my-font.eot
CSS3117: #font-face failed cross-origin request. Resource access is restricted.
my-font.eot?
I'd suggest following a thread I opened a few months ago which might help: #font-face import not working in offline website/different host using online fonts via CSS in IE only. This was an issue for IE only so wouldn't be surprised if you're having the same issue. I had other issues when transferring the font to a different server.
For any future font embedding, I would strongly suggesting using the following CSS code and ensuring all file types involved are converted correctly:
#font-face {
font-family:'My-Font';
src:url('../includes/fonts/my-font.eot');
src:url('../includes/fonts/my-font.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/my-font.woff') format('woff'),
url('../includes/fonts/my-font.ttf') format('truetype'),
url('../includes/fonts/my-font.svg#my-font') format('svg');
font-weight:normal;
font-style:normal;
}
just wanna help you guys quick,
First: Put this in .htaccess
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Secondly: Go to where you have hosted the site, in my case it's cpanel and check for the file permission, it should be 755 from the fonts folder till the font(s).
There shouldn't be any errors with the code; it should be a browser or network problem.
Try clearing all the cache and reloading the page several times.
If that still doesn't work, go to Chrome, load the page, press F12, go the the Network tab, and reload the page. See if the browser loads the font CSS file and the fonts.
If there is a 404 Not Found error, point your browser to the font files directly (yourdomain.com/fonts/texgyrecursor.ttf).
If you can't access the font file directly, check whether or not you've uploaded it. Then check the permissions of the file.
If that still doesn't work, try to add the <link> tag that Google Webfonts provides, then uploading.
Hope that fixes it!
Exactly! the solution is to call fonts from css respecting case sensitive. for example is not the same call like this: url (font / arial.ttf) a ARIAL.TTF file must be url (font / ARIAL.TTF)
I've just had the same problem, turns out there was a capital letter on my "Fonts" folder, I renamed it woth FileZila and now it works just fine!
The server has utf8 support. So, it is not necessary to install language fonts separately. If you need an additional fonts to be installed in your website upload the font file in your websites font folder. But, if any language is not supporting than you need to enable the support of utf8 on you server. You can do it by putting below mentioned code in head tag-
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
I've had the similar issue - and just resolved it by replacing the font URL/path.
1. add this into your head tag
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
identify your font family on your script, you can find it on the font link/url on your script.
this is mine:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500italic,700,500,700italic,900,900italic' rel='stylesheet' type='text/css'>
from the above details, I can find the font family is ROBOTO.
then I visit GoogleFont Website - then find my required font.
my font:
search font: roboto
category: sans-serif
once you found the required font - click on the 'select this style' button, then you will get the link/path like this:
link rel="preconnect" href="https://fonts.googleapis.com"
link rel="preconnect" href="https://fonts.gstatic.com" crossorigin
link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet"
copy it to your script.
clear your browser cookies/cache or try it on private browser (incognito)