I am having an issue where a font that I am hosting from the same server the page is being served from, is not loading in IE9. However, this is not always the case. Most of the time it loads correctly. I noticed that when it does not get displayed correctly, IE9 loads the .eot? (see css about question mark), .woff and the .ttf font files. When the font is displayed correctly, it only loads the .eot? file. Here is my CSS
#font-face
{
font-family: Rokkitt;
src: url('/Hormel/Fonts/rokkitt-bold-webfont.eot');
src: url('/Hormel/Fonts/rokkitt-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/Hormel/Fonts/rokkitt-bold-webfont.woff') format('woff'),
url('/Hormel/Fonts/rokkitt-bold-webfont.ttf') format('truetype'),
url('/Hormel/Fonts/rokkitt-bold-webfont.svg#rokkittbold') format('svg');
}
I also added the .woff to the IIS MIME type, before that I was getting an 404 error when trying to load the .woff file and it would not load the .ttf file and the font would still not display correctly.
From what I have read, IE9 is supposed to use the first .eot file, not the .eot?iefix file, is this correct?
I tried loading this font from the google font library but i was experiencing the same issues in terms of the font not always showing up correctly.
I don't know if this makes a difference, but I load the CSS on the landing page. When the user clicks on a certain element, I make an ajax call for the page to be displayed in a lightbox that appears. This is where the font is not displaying correctly. Also, when I try to inspect the content in the lightbox, the inspector says that the container, that is always on the page without any content loaded, is empty.
EDIT**
So when the fonts do not load, I get 3 CSS3117: #font-face failed cross-origin request. Resource access is restricted., one for the .eot?#iefix file, one on the .woff file and one of the .ttf file.
This is from Google and when I serve the font files from the same server as the web page.
I also load two other fonts from Google, but do not have any issues with them. Just the Rokkitt font.
I added
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
To the web.config file and added Access-Control-Allow-Origin to the response header on the server.
Related
Sometimes my page loads not so smoothly because it waits for the .ttf file to be loaded.
Is there any way I can embed it inline?
Just like to turn <img src="xxxx"> into <img src="data:image/jpeg;base64, ....
Yes, in exactly the same fashion.
<style>
#font-face {
font-family: 'myfont';
src: url('data:font/ttf;base64,...') format('truetype');
}
.myfont {
font-family: 'myfont';
}
</style>
A data URL is a kind of URL. As far as I am aware, in HTML/CSS, anywhere you can use a URL, you can use a data URL; just make sure to assign it the proper MIME type (and text encoding, if necessary).
However, this should rarely be needed. If your page frequently waits for a file to load, you might want to check your cache headers, and configure your web server to match your expectations; ideally, the browser should load your file only once, then remember it for a good long time.
I am trying to add 'MyriadPro' font using the #font-face. Here's the fiddle
HTML code:
<h1> Test Heading </h1>
CSS Code:
#font-face {
font-family: 'MyriadPro Regular';
src: url('http://consumemarketing.com/thai-works/MyriadPro-Regular.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('http://consumemarketing.com/thai-works/MyriadPro-Regular.ttf') format('truetype'), /* Opera, Safari */
url('http://consumemarketing.com/thai-works/MyriadPro-Regular.svg#font') format('svg'); /* iOS */
}
h1{
font-family: 'MyriadPro Regular', sans-serif;
}
I've tried to test this locally, doesn't work, not sure what's missing.
You spelled MyriadPro as MyriaedPro
h1{
font-family: 'MyriadPro Regular', sans-serif;
}
Edited
This is the error being displayed in the console.
Font from origin 'http://consumemarketing.com' 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.
and this is the error being displayed in your fiddle.
Mixed Content: The page at 'https://jsfiddle.net/krish7878/27tp756L/' was loaded over HTTPS, but requested an insecure font 'http://consumemarketing.com/thai-works/MyriadPro-Regular.woff'. This request has been blocked; the content must be served over HTTPS.
You are trying to load the fonts locally, which is not allowed as the requested resource doesn't have a header and in your JSFiddle, it doesn't allow the font to load as it is from an insecure origin (http). So instead download the fonts locally and try using them, which works surely.
The website that you are trying to load the font(s) from is blocking the loading of the fonts onto your page as web fonts are subject to Cross-Origin Resource Sharing (CORS). CORS is basically a way for a remote host to control access to certain types of resources, so without the owner of the server that you are trying to access the fonts from modifying their .htaccess file to include the header to allow the CORS, you are unable to utilize these fonts from that server.
More info on CORS can be found here if you want to learn some more.
The simplest thing to do would be to download the fonts you have specified by placing the URL you used in the #font-face property in your browser and then putting them in the folder where your site's folder, and modifying the #font-face URL's to direct to your local folder.
For example if you were to download the fonts to your site's folder in a subfolder called /fonts, you would modify the #font-face src to the following:
#font-face {
font-family: 'MyriadPro Regular';
src: url('fonts/MyriadPro-Regular.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('fonts/MyriadPro-Regular.ttf') format('truetype'), /* Opera, Safari */
url('fonts/MyriadPro-Regular.svg#font') format('svg'); /* iOS */
}
Apart from avoiding your issue, the other thing is that by storing the files locally, it greatly reduces the loading time for the user as it is not relying on the external server to provide the files.
Hope this clears everything up.
When I run my project locally on Visual Studio 2013, Font Awesome Icons work. However when deployed they are absent.
When run from the server, the IE developer tools shows the Css coming in but there is NO CALL to the fonts. No 404 error! No 403 error! Nothing. It's like the Css is skipping over the #font-face declaration because it does not even try to call the EOT file.
Here are the facts:
Mime Types are all added to IIS 7.0 (eot, svg, woff, woff2, ttf)
The File structure to css is -- fonts > font-awesome > css
The File structure to fonts is -- fonts > font-awesome > fonts
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular')
format('svg'); font-weight: normal;font-style: normal;
}
There's really not enough here to say for sure, but if I had to hazard a guess, I'd imagine you're including Font Awesome in a bundle, and the bundle path is breaking the font references.
The bundle path, i.e. ~/bundles/foo is a literal path. When the bundler joins and minifies everything it saves the file to that location. Style bundles typically use ~/Content/foo because of the tendency to reference things like images and fonts in ~/Content. Of course, bundling only happens in production, by default, so it won't affect you in development either way. I'm not sure what you're actually using as a bundle path, but that would be the first place I looked.
Another potential problem is that perhaps the bundle is not being loaded at all. This is common when you accidentally create a bundle path that maps to a physical directory. For example, if your bundle path is ~/Content/fonts, and you have a physical folder named fonts under ~/Content in your project, then your bundle will not be loaded and none of the scripts/css in that bundle would be applied to the page. Make sure your bundle path does not reference a physical directory.
This question applies to situations where the web font isn't required on the main page and is initially inside a div set to display:none;
I have a web page that loads a hidden form via Javascript on click and this form uses a web font. My issue is that there is a one second delay when the user clicks to reveal the form, as it is at that moment Chrome downloads the woff2 file.
This isn't very nice for the user experience.
I need to preload the webfont as I have no usage for the font on the main page, so there is nothing to cause Chrome to fetch the woff2 file before the users clicks to reveal the hidden form.
I noticed that this doesn't matter if you're hosting the Font Awesome on your server or using the CDN.
I looked around on the internet to see what could be done, I tried all of the below and none of it helped, nothing caused the woff2 file to load on page load, it only ever loaded when the webpage actively needed the font.
Attempt 1: Preload
<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2">
or
<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2" as="font">
Attempt 2: Prefetch
<link rel="prefetch" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2">
Attempt 3: CSS
#font-face {
font-family: 'Font-Awesome';
src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2");;
}
As I was looking around I started to see possible solutions with Javascript based loading, something I really didn't want to go near, so what are my options here?
I ended up with this simple solution, it hasn't been tested on anything other than Chrome but it's pretty basic for my use case, I can't imagine it not working on any modern browser.
I decided to force load the woff2 file by loading a font onto my main page, but ensure that the users can't see it.
As I already discovered, Chrome does not fetch resources that are required by any div that is set to display:none;
So here is my solution instead.
CSS
.div-fake-hidden {
width:0px;
height:0px;
overflow:hidden;
}
HTML
<!-- This fake div hidden preloads our web font! -->
<div class="div-fake-hidden"><i class="fa fa-square-o fa-3x"></i></div>
Now the browser loads the woff2 resource on page load, so that when my users click a button to reveal the hidden form, the web font loads immediately.
you don't need a hidden div to make your font work. As long as you're using a supported browser (picture from w3schools) the css #font-face rule should work fine.
You can also add more font formats as follows:
#font-face {
font-family: 'Font-Awesome';
src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2"),
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff') format('woff'),
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.ttf') format('truetype');
}
You could try using Web Font Loader: https://github.com/typekit/webfontloader
Web Font Loader gives you added control when using linked fonts via #font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. The Web Font Loader is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts. It is co-developed by Google and Typekit.
My MVC4 website uses a .woff font, which is stored locally within my Visual Studio project (RootFolder/Content/font/myfont.woff).
When I debug locally, it works fine (meaning, I can see the desired font).
I then publish to the remote server, test it and the font isn't doing what it should be doing. I can see the relevant text, but with the 'default' font
I logged onto my remote server, and have verified the files are there!
I know the font I'm using is not installed on the server, but that I don't think matters from what I've read.
My CSS is simply
#font-face {
font-family: corsive;
src: url("font/MT.woff") format('woff');
}
h1,h3 {
font-family: 'corsive';
font-size: 1.2em;
}
If I visit mysite.com/content/font/MT.woff then the browser tries to open it.
My site doesn't use SSL, so it's HTTP only.
The same issue persists in FireFox, Chrome and IE
How can I debug this issue?
IIS has security settings that by default deny access to any file extension that has not been defined in MIME types. As the direct link to the font file doesn't seem to work, but causes a 404, this might be the case.
Normally a .woff file extension has no MIME type set, so check the server configuration.