Bootstrap font not loading properly on live server. First second times its loading properly but after several time refresh font not loading properly.Thanks in advance.
global.scss
#import '../../../node_modules/font-awesome/scss/font-awesome';
Under global.scss, there are no of files i #imported included font-awesome file.
Related
I linked my fontAwesome to the head of my index.html properly. But whenever I try rending the page with lite Server, the page keeps loading without showing anything including my html text! the page keeps loading saying waiting for font awesome.
is it a problem of liteServer? or it's from font awesome .. any help?
I'm using icons from font awesome for my web page.
For some time i have noticed that the link has been broken or unreachable
https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
Is there some issue with their repository?
I am unable to even download static files from their web page.
http://fontawesome.io/
From a while even i have been getting this error in inspect element were it show connection Error Failed. If u are using icons you can try this link.
<script src="https://use.fontawesome.com/97755550d3.js"></script>
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.
UPDATE: FIXED, SEE BELOW
Turns out the server I had the font name as 'Close.otf' in my fonts folder and 'close.otf' in my code, I'm guessing my code worked fine locally because it isn't case sensitive, GitHub's server is though apparentely. Just fixed by changing the C from uppercase to lowercase, now the font shows up fine.
...
I am building a website, and for the header I am using a custom font named "close.otf". Now, before pushing my changes to my GitHub Pages repo, I edit my css and html files locally.
So I added the custom font using the #font-face rule on my local CSS file, opened that file up with Chrome, and it shows up completely fine, as you can see:
However, upon pushing the CSS file and HTML file to the GitHub server where my site is hosted, for some reason, upon loading the site in Chrome, the font shows up as follows:
Here is the code I used:
#font-face
{
font-family:"close";
src: url("../fonts/close.otf") format("opentype");
}
And yes, since the local files are a clone of the GitHub repo, it's not some simple mistake like making sure it's in the same folder as the adress etc.
It's also worth noting all other custom fonts I've added to the site have worked completely fine, like the one below the header used in the nav links.
Anyone know how to fix this?
Have you used the developer tools in your browser to see what the server is sending? Your browser is requesting a font file, but the server may be returning forbidden, not found or some other error that will help you troubleshoot.
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)