I have a project with bootstrap en font-awesome setup if I view my main.css the first thing I see is that font-awesome is imported. And all its icons, I don't understand why the html is not picking up the font-awesome classes.
/*!
* Font Awesome 4.4.0 by #davegandy - http://fontawesome.io - #fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
/* FONT PATH
* -------------------------- */
#font-face {
font-family: 'FontAwesome';
src: url('../../fonts/fontawesome-webfont.eot?v=4.4.0');
src: url('../../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I'll hope someone can help me out on this
is this your project folder looks like?
folder structure image
if so, then remove one "../" in your font-awesome.css file.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
You need to check the font path, check in the Console of your browser (Ctrl+Shift+J on Chrome) if you don't get an alert like
Failed to load resource: [...]
This kind of warning means that the path of the ressource is wrong.
Related
I am creating a simple web page and I am applying a custom font (Roboto). I have declared them in the CSS file but Chrome detects it fine and Safari does not.
#font-face {
font-family: 'Roboto';
src: url('/fonts/roboto500.eot');
src: url('/fonts/roboto500.eot') format('embedded-opentype'),
url('/fonts/roboto500.woff2') format('woff2'),
url('/fonts/roboto500.woff') format('woff'),
url('/fonts/roboto500.ttf') format('truetype'),
url('/fonts/roboto500.svg') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('/fonts/roboto700.eot');
src: url('/fonts/roboto700.eot') format('embedded-opentype'),
url('/fonts/roboto700.woff2') format('woff2'),
url('/fonts/roboto700.woff') format('woff'),
url('/fonts/roboto700.ttf') format('truetype'),
url('/fonts/roboto700.svg') format('svg');
}
h1.site-title,
h2.subtitles {
font-family: 'Roboto' !important;
font-weight: bold;
}
h4.subtitles {
font-family: 'Roboto' !important;
font-weight: bold;
}
p {
font-family: 'Roboto' !important;
font-weight: normal;
color: rgb(90, 90, 90);
}
I checked with the Safari console to see if it was getting the fonts, and it does, but when I look at the files one by one, they don't match the original font.
Finally, thanks to some comments and such, I got it to work using another download link:
https://fonts.googleapis.com/css?family=Roboto
From here Google offers different components to add to the CSS of your project, what I did was, just in case in the future that typography was no longer available in that link and I lost it, I downloaded it from the link that appears and I put it locally in my project and linked it with the relative path.
I have no idea if it was because the files I downloaded didn't work or any other reason, but the fact is that from this link and using only the one in woff2 format, it works both in Chrome and Safari.
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(../fonts/roboto/roboto.woff2) format('woff2');
}
I hope this may be of help to someone in the future. Many thanks to all of you who have responded.
In my css:
#font-face {
font-family: 'Montserrat Reg';
src: asset-url('montserrat-reg.eot');
src: asset-url('montserrat-reg.eot?#iefix') format('embedded-opentype'),
asset-url('montserrat-reg.woff2') format('woff2'),
asset-url('montserrat-reg.woff') format('woff'),
asset-url('montserrat-reg.ttf') format('truetype'),
asset-url('montserrat-reg.svg#montserratregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Montserrat Bold';
src: asset-url('montserrat-bold.eot');
src: asset-url('montserrat-bold.eot?#iefix') format('embedded-opentype'),
asset-url('montserrat-bold.woff2') format('woff2'),
asset-url('montserrat-bold.woff') format('woff'),
asset-url('montserrat-bold.ttf') format('truetype'),
asset-url('montserrat-bold.svg#montserratbold') format('svg');
font-weight: normal;
font-style: normal;
}
This appears to compile properly in my fingerprinted assets but the page actually displays the default font despite the developer console in production showing:
body {
margin: 0px;
padding: 0px;
font-family: 'Montserrat Reg'; }
The above shows exactly the same in development as well. The sources tab shows that the files referenced in the css are being included when I hit Ctrl + F5 in production, however, in development mode, the sources tab does not list the font files which indicates the fonts are coming from somewhere else. This is the opposite of what I would expect. Any ideas what might prevent the browser from displaying properly?
Tested in Chrome and IE. For what it's worth I am also using font-awesome for the icons.
Rails 4.1.6 and 4.2.0
I wanna make a website with a font named SutonnyMJ.TTF (in Bangla). I tried many resources, but i failed to do this.
i use #font-face { font-family: SutonnyMJ; src: url('../fonts/SutonnyMJ.TTF'); }
#font-face {
font-family: 'SutonnyMJ';
src: url('../fonts/SutonnyMJ-webfont.eot');
src: url('../fonts/SutonnyMJ-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/SutonnyMJ-webfont.woff') format('woff'),
url('../fonts/SutonnyMJ-webfont.ttf') format('truetype'),
url('../fonts/SutonnyMJ-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
but they does not work that i want.
Is there anyone to help me please, How can i solve this?
you can probably remove a couplke lines from there and remove legacy support your site will probably work fine with just this
#font-face {
font-family: 'SutonnyMJ';
src: url('../fonts/SutonnyMJ-webfont.woff') format('woff'),
url('../fonts/SutonnyMJ-webfont.ttf') format('truetype');
}
With #font-face you loaded in a custom font but you aren't using it yet
You still have to apply it to your website
body {
font-family: 'SutonnyMJ', sans-serif;
}
I am making a basic informational website. In my CSS file I have the following:
#font-face {
font-family: "Nilland";
src: local('Nilland.ttf');
}
body{
background: #FFF;
font-size:14px;
font-family: Nilland;
}
The .ttf file is in the same directory as the index.html file. Why is this not working?
You need to include all types of your font instead of only .ttf, should be something like:
#font-face {
font-family: 'Nilland';
src: url('Nilland.eot');
src: url('Nilland.eot?#iefix') format('embedded-opentype'),
url('Nilland.woff') format('woff'),
url('Nilland.ttf') format('truetype'),
url('Nilland.svg#Nilland') format('svg');
}
Put the ttf files in the folder where the css file is.
The path in the css file is relative to the css-file, not the html file
Try specifying the complete path
#Felix is right although; try separate block for normal and bold font. Use svg and other formats for multiple browser compatibility and path may be issue not to work.
#font-face {
font-family: 'Nilland';
src: url('../fonts/Nilland.ttf') format('truetype'), url('fonts/Nilland.svg') format('svg');
src: url('../fonts/Nilland.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Nilland";
src: url("../fonts/Nilland.ttf") format('truetype');
font-weight: bold;
font-style: normal;
}
I coded a website on my mac, and i used a custom font. I defined the custom font with this font-face rule:
#font-face
{
font-family: gnuolane;
src: url('../fonts/gnuolane.otf'),
}
The problem is that the font is not loaded on any windows version of any browser. On my mac, on Safari/Chrome/FF is working perfect.
This is the website.
And this is how it is supposed to look like, when font-face is working correctly:
Thanks
LE:
I generated this code and all those files from fontsquirrel.com. Still not working. I tried with both '../fonts/gnuolane....' and '/fonts/gnuolane....'
#font-face {
font-family: 'gnuolane';
src: url('../fonts/gnuolane_rg-webfont.eot');
src: url('../fonts/gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/gnuolane_rg-webfont.woff') format('woff'),
url('../fonts/gnuolane_rg-webfont.ttf') format('truetype'),
url('../fonts/gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
Still not working tho'..
Move all your font files (the actual fonts I mean) to the same folder as your CSS file...
Then use this block of CSS. Tell me if it works. I sense it's a path issue...
#font-face {
font-family: 'gnuolane';
src: url('gnuolane_rg-webfont.eot');
src: url('gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('gnuolane_rg-webfont.woff') format('woff'),
url('gnuolane_rg-webfont.ttf') format('truetype'),
url('gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
try this
#font-face {
src: local('gnuolane'), url('/path_to/gnuolane.otf') format('truetype');
}