Everything in my web works well except #font face in the CSS file.
My web uses 2 fonts which neither of them can be loaded to display. One of them is fontawesome. I both tried to load the font from my server and the fontawesome server, but the result is the same.
I tried to view the page in IE Edge, Firefox and Chrome browser in PC and neither of them worked properly. However, when I tested in iPad Safari, it worked well.
Please be informed that all font files are accessible and my PC can view font in fontawesome.io perfectly. Please kindly advice what is wrong in my code.
Here is the code:
#font-face {
font-family: 'FontAwesome';
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Here is the result in PC (Font Face is not load):
Here is the result in iPad (Font Face is load successfully):
From the png it's imposible to understand the problem. I can tell you to Read well this link you could found your solution.
If Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Using Sass or Less
Use this method to customize Font Awesome 4.7.0 using LESS or SASS.
Copy the font-awesome/ directory into your project.
Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the #fa-font-path or $fa-font-path variable to point to your font directory.
#fa-font-path: "../font";
The font path is relative from your compiled CSS directory.
If your website runs via HTTPS protocol and you are trying to load external resources via HTTP - the loading will be blocked by browser.
Second, if the above is not the case - make sure you are loading the fonts with correct file path, for example:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
or use bootstrap CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Related
I’m trying to implement some animated social media icons on my site with pure CSS and no JS. The pen I found that am trying to adapt is called "Yet Another Set of Animated Social Icons".
The problem is, rectangle glyphs are showing instead of the correct social media icons in my web browser locally and remotely. The icons appear properly in the original codepen. But somewhere along the way in my implementation on my web server or in my web browser, I am importing the web fonts incorrectly.
Here is what it looks like locally in my web browser.
So you can see it yourselves, here it is on my web-server: https://angeles4four.info/
The author of the original codepen uses external style sheets and preprocessors. I’ve done my best to include these imported in my HTML and CSS. See below.
In my head tags in my index.html is this:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
In my css file is this:
#charset "UTF-8";
#font-face {
font-family: 'icomoon';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?3qkin2");
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?#iefix3qkin2") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.woff?3qkin2") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.ttf?3qkin2") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.svg?3qkin2#icomoon") format("svg");
font-weight: normal;
font-style: normal;
Is this set up correctly? What am I missing? I'm trying to get my social media icons to render properly (as they appear in the original pen) instead of empty rectangle glyphs.
you forgot add
https:
try this
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
To recap how I got this working, I made two changes:
Courtesy of Hossam Elmasrey, I added https: to one of the link elements in index.html.
Turns out I was missing local system fonts. So with Manjaro being my local O/S, I invoked: sudo pacman -Ss ttf-liberation. I’m not sure when, how, or why these fonts were missing, but Liberation fonts are installed now.
Then I restarted my browser. When accessing my remote website through Firefox and Chrome, all the icons load properly. Hooray! But loading index.html from Chrome and Firefox directly from my local file tree doesn’t work - - which Connum explained is because web browsers disable some content from loading externally for security reasons. Going forward I will use a local testing server.
Thank you both for your help.
I want to use glyphicon glyphicon-info-sign
For this I am using below code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
And this is working for me.
When I copy CSS from above URL and create one bootstrap.min.css file in my Project inside css folder and use below code
<link rel="stylesheet" href="css/bootstrap.min.css"/>
But it's not working. I am getting below error on console
Please help me to fix this.
I am using AngularJS, Bootstrap v3.3.7.
Because you only copy CSS file and missing font files (in CDN, they use relative path to font folder)
You can download Bootstrap from http://getbootstrap.com/ and copy font folder to your project.
Or fix the path in CSS file by replace all ../fonts/ with full path https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/
The CSS file you copied from the CDN use relative paths for those resources you are getting errors. Do not copy dependencies from CDN-s directly. Try to get them through a dependency handler or add them as described in their documentation.
The bootstrap CSS you mentioned(non minified version) refers to few font files which looks like this:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Meaning you need to have these "font files" in a directory named fonts in the same level as your bootstrap css file.
Since you are using a minified version(.min.css), don't try to alter the path in your css file rather place the necessary font files in the location the css is looking for.
Hello I am trying to add the fonts from FontAwesome in order to use their icons and they require a root folder called Fonts.
I have tried to link it with
<link type="text/css" href="/myPath/font" />
The fonts from FontAwesome are declared in an #font-face rule in the css.
If you use the less or scss version, you can just override the path set in variables:
$fa-font-path: "path/to/your/fonts";
If you just use the css version, you should be able to redeclare the font-face rule (replace '../fonts/' by your path):
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Just curious, how exactly do you know the fonts are not being pulled in? Is it because you are unable to create icons using font-awesome?
Aside from that, if you installed font-awesome with bower, npm or pulled from github it should have the following directory structure.
font-awesome
css
font-awesome.css
font
(font files / eot, svg, ttf, woff)
If it is in this directory structure then your css should point to those font files. Then it's just a matter of pulling in the font-awesome css like so:
<link rel="stylesheet" href="{{path}}/font-awesome/css/font-awesome.css" />
I would double check your directory structure for font-awesome and maybe try installing it via bower if nothing else.
I hope that helps.
As far as i am aware you have to add the link to the css file and the css file will link to the font folder which is preset by the font-awesome library. Therefore your code will contain the font-awesome.min.css file and you will need to have the font folder in the same directory,but the link will look in the html like this :
<link rel="stylesheet" type="text/css" href="font-awesome.min.css"/>
or using the cdn:
<link rel="stylesheet" type='text/css' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
Hope this helps !
use chrome browser,
Press F12 when and goto console tab
check details of errors and it will show the path browser is looking for FONTS,
just make sure that fonts are present on that path...
that's it...
I'm currently making a webpage that imports the needed fonts from Google Fonts this way:
#import url(http://fonts.googleapis.com/css?family=Italianno);
The problem is that every time I load the page I need to be connected to the Internet and it also takes time to load the font. Is there any way I can load the font offline because while testing the page I'll be refreshing it countless number of times and I might not be connected to the internet all the time and I don't want to wait for 3-5 seconds every time for the font to be loaded.
I tried installing the font in the system and then using it in the CSS. It didn't work.
Hey make a fonts folder with css folder and put the desired font there. Then in CSS call this code as example for MeriyoUI font as mentioned below. This would load the font onto your app.
For this you just need to download the font and put that in fonts folder. (pre-requisite).Try using web safe fonts.
Hope it helps.
CSS
#font-face
{
font-family: 'Meiryo UI';
font-weight: normal;
font-style: normal;
src: url('../fonts/MeiryoUI.ttf');
}
1. create a folder in website directory and move your fonts
to it! ( .ttf , .eot , .woff )
example: directory --> webfonts
2. create a css document for that!
example: directory --> css --> webfont.css
3. use this code into webfonts.css
#font-face {
font-family: 'name';
font-style: normal;
font-weight: 400;
src: url('../webfonts/fontname.eot');
src: url('../webfonts/fontname.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fontname.woff2') format('woff2'),
url('../webfonts/fontname.woff') format('woff'),
url('../webfonts/fontname.ttf') format('truetype');
}
4. and in the first line of haed element into your webpage, use bellow code:
<link rel="stylesheet" href="css/webfonts.css" type="text/css"/>
Use CSS3 #font-face. Try making font face of your fonts from any fontface generator like this http://www.fontsquirrel.com/tools/webfont-generator. And to learn how to use them take a look in here http://css-tricks.com/snippets/css/using-font-face/
I'm building a site on Squarespace, and i'm trying to implement some fonts using the #font-face command. I can get it to work properly in Chrome and Safari, but not in Firefox.
Here is my code...
#font-face {
font-family: "Stagger Medium";
src: url("/storage/fonts/stagger/medium/staggermedium.eot");
src: local("?"),
url("/storage/fonts/stagger/medium/staggermedium.woff") format("woff"),
url("/storage/fonts/stagger/medium/Stagger%20Medium.otf") format("opentype"),
}
Any ideas?
Edit:
I've seen some things mentioning Cross-Site Font Usage using access control headers. Is that a possibility? I'm not entirely sure how to implement that though.
Edit:
I've also read that if you put the fonts in the same directory as the website, then it shouldn't be a problem in Firefox. HOWEVER, i'm using Squarespace, so I can only store the font in the STORAGE directory, which is separate from where the site is located.
I'm sorry, it was actually the opposite, remove the full url:
<link rel="stylesheet"
href="/storage/css/fonts.css" type="text/css" charset="utf-8">
I put both just to be safe.