Font-face don't display well - html

I have a wordpress site here http://itrain.com.my/v3/ as my Home Page
I am wondering why it is not displaying well in Firefox?
Anyone who is good in css?
By the way, try to look at the subpages http://www.itrain.com.my/v3/index.php/about-us/
it display well.
I am really wondering why does it happening.
Any can help me? Any suggestion, recommendations?

I think problem is with URL.
It work http://www.itrain.com.my/v3/ but doesnt work on http://itrain.com.my/v3/
Set on your server redirection (301) from non-www URL to www URL.

I would wager you have the font installed on your local machine. I don't see it on any browser. Instead, I get two 404 errors.
In other words: please make sure the font files are available at the locations their respective locations: http://www.itrain.com.my/v3/wp-content/themes/itrain/img/fonts/big_noodle_titling-webfont.woff and http://www.itrain.com.my/v3/wp-content/themes/itrain/img/fonts/bebas__-webfont.woff.
[EDIT]
I've just looked at the fonts directory listing on your site. The ttf and eot versionf of your fonts are available, the woff and svg are listed, but result in a 404 error. Furthermore, the ttf version (downloaded instead of woff in Firefox, after getting a 404) seems to generate an empty HTTP response.
So... Make sure the fonts are there, make sure they have proper privileges set (like 0644). I can't see any other issues than the font files themselves as the CSS appears to be correct.
[EDIT 2]
#kubedan provides a great tip that seems to fit your concern about the htaccess: the domain the fonts are downloaded from is always preceded with www. Firefox will refuse to download such content, you need to use the same domain.

Related

CanĀ“t load font in WordPress site due to CORS policy

I am unable to load a font file for my WordPress website. This happens specifically in Chrome browsers, Safari and others don't seem to share this issue.
The font files are located on the same folder where the rest of the assets and public files are contained. These load without any problem, images, css, javascript etc. Only font files seem to cause this problem.
The console shows the following error:
Access to font at 'https://example.com/wp-content/uploads/2019/08/font-file.otf' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
As stated before, in other browsers, like Safari, the fonts load with no problem. I would like to solve this issue so it works across all browsers.
Check wordPress address and site address in your blog Settings > General settings.
Here whole answer:
https://wordpress.stackexchange.com/questions/278512/access-to-font-not-allowed-by-cors-policy

Do browsers request favicon.ico even if it is not linked in the HTML

I am looking for a site for somebody, and fixing errors as I find them.
There is no Favicon.. that is ok, I can fix that.
My question is, do browsers (or certain browsers, Chrome in this case) request favicon.ico as soon as they load a site.. or maybe on check that there is no alternative icon path mentioned in the source.. irrespective of whether "favicon.ico" is actually mentioned in the page source?
That was the original behaviour, yes. /favicon.ico was an implicitly present file which (some) browsers would check for. Only later did that actually morph into a proper standard with <meta> tags, arbitrary file names and image formats other than .ico.

web site different rendering on remote an local url in safari

I'm developing my wedding's website, and I have a problem I really don't understand: when I browse it on my local machine the site is rendered correctly, but if I browse the site remotely there is a section shown in a wrong way. In order to be sure about the files correctness I just removed on ftp all the site's files and re-uploaded them from scratch. Same problem. It happens on safari only, on all the other browsers the site is rendered fine
this is how I see the site locally
this is how I see the same file remotely
How can it be possible?
For anyone who want to help the link to the site is http://silviaesimone.com
thank you
The server is using the wrong MIME type for the Bebas Neue font. It sends the font as text/plain which, apparently, Safari can't handle.
Solution: make sure that files with extension .otf are served with the correct MIME type, which is font/opentype.
(It depends on the kind of server how you need to do that; see here for IIS or here for Apache).

Font Awesome does not work in browser, but works in codepen

I downloaded Font Awesome today and did it a try. In firefox and chrome (latest versions) it appears as blank squares. If a use the CDN link, it doesnt even work, the standard bullets appear instead of the blank squares. But in codepen.io, it just worked fine, using the CDN.
The html i used is just the same as the example of the lists, which is here: http://codepen.io/pietrofxq/pen/BCaoD
Does someone knows the problem?
You are using a schemaless URL to access the CDN.
If you are trying to open the page from your disk (schema being file://) then it will fail is it will use the same schema to access the CDN
Try with a full URL http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css
If you are calling it from a server, then make sure that the font files are delivered correctly. Some servers need to be told to allow the font files to be accessed.
(use the console to see if they load ok)

After using CNAME to redirect URL, Webfonts no longer work

Running in chrome:
www.AshGavs.com
vs.
http://ashgavs.cloudant.com/site/_design/AshGavsCouch/main/index.html
Really confusing, especially because the fonts are hosted on google...
D'oh. Cross domain error. I had simply listed "/fonts.css" for my fonts file, so I think it was going to "AshGavs.com/fonts.css" for the file.