My HTML is in local system and pointing to css
<link rel="stylesheet" href="http://nagasystems.in/tamil/stylesheet/common.css" type="text/css" charset="utf-8" />
My font path folder is
http://nagasystems.in/tamil/stylesheet/
i have following fonts in it
bamini-webfont.eot
bamini-webfont.svg
bamini-webfont.ttf
bamini-webfont.woff
bamini-webfont.woff2
Now if i load the local HTML in browser the font is not loading ... Tested in all browsers.. However if html , css and font are in online it works or if all three are in local it works ..
Check below the link for all three being in online that works
http://nagasystems.in/tamil/
Kindly help me please .. Breaking my heads out for solution ...
Update : Error in chrome console "Font from origin 'nagasystems.in'; has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access"
Try Adding the following line to .htaccess file in the same folder of style sheet
Header set Access-Control-Allow-Origin "*"
It will allow the header from all locations (*)
Related
I have an S3 bucket hosting a simple website serving 1 HTML file & 1 CSS file.
The HTML file seems to be able to locate the CSS file, but the problem is that the CSS file is not rendering correctly for some reason when uploaded to S3 and loaded on a browser. Lines are messed up and center background color extends out all the way to the edge. It looks fine when the same files are opened locally on a browser.
I have tried:
opening with different browsers
making sure metadata is correct for the css file
re-uploading via Console & AWS CLI
Rendering on S3 (not rendering right):
Rendering on local (the way it should be):
metadata content-type: text/css:
bucket hosting checked:
What could be causing this?
I had this same issue. The way I resolved it was by omitting "/" in the CSS reference since it did not have a containing folder in my S3 bucket. It seems regular text editors can automatically do this somehow? I was referring to my CSS file like this --> <link rel="stylesheet" type="text/css" href="/main.css"> and then omitted the "/" resulting in ---> <link rel="stylesheet" type="text/css" href="main.css"> and then it worked.
Here is the HTML I am having problems with:
<link rel="stylesheet" href="http://resources.8thdaystudio.com/neonlights.css" type="text/css" />
I have a copy of the css file in my page's local folder, and when I put neonlights.css in the href, it works. I have a copy in my resources server to use from any of my pages, but it's not applying the css when I do the direct link. Using inspect in Chrome it's not showing me an error loading the file but still not applying the css.
it is observed that the url:
http://71.57.185.233:82/neonlights.css loads as text/css
but http://resources.8thdaystudio.com/neonlights.css loads as text/html.
It's due to your server's configuration as you indicated. I have verified this in Fiddler.
Through some reading about MIME types I figured out that the likely problem is my server. I'm running Servers Ultimate Pro on an Android device and I believe it's sending the file with the incorrect type.
I recently added SSL to my website but it keeps giving me the error:
Mixed Content: The page at 'https://youtubehulp.nl/comingsoon/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic'. This request has been blocked; the content must be served over HTTPS.
While the link to the fontsheet is https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic
I also tried downloading the file and then loading the local version but that didn't work either.
Tried code:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="font.css">
#import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");
Also made sure all links in the font file are HTTPS
I hope someone can help me with this.
You have a simple typo in your stylesheet https://youtubehulp.nl/comingsoon/css/style.css:
#import url("https//fonts.googleapis.com/css?family=…");
^^
The : is missing after the protocol name. Therefor, it is a relative URL, and when the browser makes an absolute URL out of that using the current URL, the result naturally is https://youtubehulp.nl/comingsoon/css/https//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic
And requesting that URL makes your server issue a redirect to http://www.youtubehulp.nl/comingsoon – and that is the origin of the mixed content warning.
I am trying to make glyphicons work with my local project!
i have created a virtual host called backend.mvc
now when ever i try to use glyphicons i get the following error:
"NetworkError: 404 Not Found - http://backend.mvc/site/resources/css/fonts/glyphicons-halflings-regular.woff"
glyphi...ar.woff
"NetworkError: 404 Not Found - http://backend.mvc/site/resources/css/fonts/glyphicons-halflings-regular.ttf"
however the path exists execpt from the http:// so my question is how can avoid this and make the glyphicons work?
edit
Ive added the following to my head:
<link type="application/font-woff">
<link type="application/vnd.ms-fontobject">
<link type="application/x-font-ttf">
<link type="font/opentype">
However this did nothing :(
Update
Using apache
Also please note that this is for web and NOT mobile!
If you're absolutely sure that they're not in the incorrect place, then the most common cause I come across for problems like this when it comes to serving web-fonts is that the server isn't configured to serve the correct mime-type for the files.
According to HTML5 boilerplate these are the mime-types that you should be using when serving web fonts:
woff: application/font-woff
eot: application/vnd.ms-fontobject
ttf & ttc: application/x-font-ttf
otf: font/opentype
The fonts directory should be in the same dir as the css directory by default, not in the css subdirectory
Also check your paths in the bootstrap.css
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)