I am new at learning HTML5 and CSS. Advanced apology for this very basic question.
I have downloaded a font and saved it in a folder called fonts in my project.
Then created a fonts.css file inside of css folder and put the following code in it.
#font-face {
font-family: 'FiraCode-Regular';
font-weight: normal;
font-style: normal;
src: url('../fonts/FiraCode-Regular.eot');
src: url('../fonts/FiraCode-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/FiraCode-Regular.woff2') format('woff2'),
url('../fonts/FiraCode-Regular.woff') format('woff'),
url('../fonts/FiraCode-Regular.ttf') format('truetype');
}
#font-face {
font-family: 'FireCoda-Light';
font-weight:normal;
font-style: normal;
src: url('../fonts/FireCoda-Light.eot');
src: url('../fonts/FireCoda-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/FireCoda-Light.woff2') format('woff2'),
url('../fonts/FireCoda-Light.woff') format('woff'),
url('../fonts/FireCoda-Light.ttf') format('truetype');
}
Then in the main.css file I added the following css:
body{
font-family:"FiraCode-Regular",Verdana, sans-serif;
font-size: 1.2rem;
}
here is an screen shot of the file hierarchy in my project
now the problem is the font is not working. I would appreciate if anyone can help me here.
add
#import url("./fonts.css");
in your main.css as the first line.
Related
I downloaded a font called Helio from envato, but I can't get the font into my local file (haven't tried live).
My code is
#font-face {
font-family: 'helios_roundedregular';
src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
url('../css/fonts/helios_rounded-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
line-height: 1.4;
margin: 0;
padding: 0;
font-family: Helios Rounded;
font-weight: normal;
font-style: normal;
}
This is a picture to the file path:
I believe it's correct. The I have the root folder, the css folder, and the font folder which contain the font files. The img shows the css and font folders open
The file names differ from the font in your path.
change
src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
url('../css/fonts/helios_rounded-webfont.woff') format('woff');
to
src: url('../css/fonts/Helios Regular.woff') format('woff'),
url('../css/fonts/Helios Rounded.woff') format('woff');
Also, if your CSS files reside in the css directory, omit the css directory declaration.
src: url('./fonts/Helios Regular.woff') format('woff'),
url('./fonts/Helios Rounded.woff') format('woff');
your CSS files reside in the css directory, omit the css directory declaration.
src: url('./fonts/Helios Regular.woff') format('woff'),
url('./fonts/Helios Rounded.woff') forma
You seems to be using wrong name for Font-Family, try this name instead.
#font-face {
font-family: 'Helios Rounded';
}
I'm trying to get the Bebas Neue font to work, I've managed to convert my fonts into their respective types but whenever I load the font in the browser I get errors.
Firebug throws:
downloadable font: download failed
Chrome throws a 404 not found.
I initially had these in their own font folder, but I then decided to move the fonts to the same directory as the stylesheet I was using to try and rule out location problems.
This particular file is a SASS partial called _typography that lives in a folder called global this is the same folder I've directly placed all the fonts into as is.
#font-face {
font-family: 'BebasNeueRegular';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
With a 404 Error - it's 98% going to be because of the path being wrong.
Just a thought - you mentioned that you moved them into a SASS partial? Can this folder be accessed from the site? From my experience, your SASS is going to compile into some sort of public directory.
In order to troubleshoot... theoretically, you should just be able to add www.yourdomaincom/path-to-font/font.eot and come up with a download file.
If you're not, then it really is an issue of the path being where the error lies. As far as why other fonts are working, I wouldn't be able to say without taking a better look at how you have your project set up.
Just my two cents worth to help you troubleshoot!
Make sure your #font-face matches your font-family use on CSS, either:
font-family: 'Bebas Neue'; on everything or:
font-family: 'BebasNeueRegular'; on everything.
Like:
#font-face {
font-family: 'BebasNeueRegular';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
Matches css use:
.selector {
font-family: 'BebasNeueRegular', sans-serif;
}
Or:
#font-face {
font-family: 'Bebas Neue';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
Matches:
.selector {
font-family: 'Bebas Neue', sans-serif;
}
I would like to set a custom font using SASS.
I was able to do that when I was using the default configuration with style.css file but when I try to run the same code on ionic.app.scss it doesn't work.
//style.css
#font-face {
font-family: 'Bariol_Regular';
src: url('../lib/ionic/fonts/Bariol_Regular.eot');
src: url('../lib/ionic/fonts/Bariol_Regular.eot') format('embedded-opentype'),
url('../lib/ionic/fonts/Bariol_Regular.woff2') format('woff2'),
url('../lib/ionic/fonts/Bariol_Regular.woff') format('woff'),
url('../lib/ionic/fonts/Bariol_Regular.ttf') format('truetype'),
url('../lib/ionic/fonts/Bariol_Regular.svg#Bariol_Regular') format('svg');
}
.login_title {
font-family: "Bariol_Regular";
text-align: center;
}
//ionic.app.scss
$ionicons-font-path: "../lib/ionic/fonts" !default;
//Common
#font-face {
font-family: 'Bariol_Regular';
src: url("../lib/ionic/fonts/Bariol_Regular.eot");
src: url("../lib/ionic/fonts/Bariol_Regular.eot") format('embedded-opentype'),
url("../lib/ionic/fonts/Bariol_Regular.woff2") format('woff2'),
url("../lib/ionic/fonts/Bariol_Regular.woff") format('woff'),
url("../lib/ionic/fonts/Bariol_Regular.ttf") format('truetype'),
url("../lib/ionic/fonts/Bariol_Regular.svg#Bariol_Regular") format('svg');
font-weight: normal;
font-style: normal;
}
// Include all of Ionic
#import "www/lib/ionic/scss/ionic";
.login_title {
font-family: "Bariol_Regular";
text-align: center;
}
The scss get compiled correctly, but then the font of the login-title class doesn't display the right font, but just the ionic default font.
Whats happening is your CSS is being called AFTER the Ionic styles, and they are getting priority over your change.
Place your .login_title, and all future style changes, ABOVE the Ionic #import
I have a problem with my icons "not showing up" on a web page, These icons are stored in the fonts folder respectively.
Below contains the snippet of my styles.css
styles.css
#font-face {
font-family: 'FontAwesome';
src: url('../../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
My file structure
How do I reference my files to ensure that my icons show up properly?
According to the example here, http://css-tricks.com/quick-reminder-about-file-paths/
I use "../../" as this will go to resources/fonts.
Am I wrong?
Any help please?
Thanks!
each ../ is used to go up one directory. You are currently in the css/ directory.
If you want to get to resources/fonts, you only need one ../ to get to resources, then you can enter fonts/
Your CSS should be:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
I have searched for its solution, and I think, I'm doing everything like the suggestions, but it is still not working. Custom font works on Chrome, IE, but not in Firefox. I have used font face generator to generate fonts and the code. I have placed the #font-face code in header, custom.css file (in theme_root/css/) and also in style.css, but it is not working.
Placed this in header.php:
<style>
#font-face {
font-family: 'Bebas Neue';
src: url('fonts/bebasneue.eot');
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('fonts/bebasneue.woff') format('woff'),
url('fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
Placed this in style.css:
#font-face {
font-family: 'Bebas Neue';
src: url('fonts/bebasneue.eot');
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('fonts/bebasneue.woff') format('woff'),
url('fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Placed this in custom.css:
#font-face {
font-family: 'Bebas Neue';
src: url('../fonts/bebasneue.eot');
src: url('../fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('../fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('../fonts/bebasneue.woff') format('woff'),
url('../fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Working everywhere, except Firefox. I'm confused
http://tour.khujbo.com
Also, this font works in html pages in Firefox fine. I have used this font in this template and it works on Firefox: http://khujbo.com. Seems to me, that the problem with Firefox and WordPress combination.
What should I do?
I don't think you need to define this font-face everywhere. You can place the CSS only in custom.css. And, you have defined the "Bebas Neue" font-face in your header.php with wrong URL. CSS is trying to get the font (woff, ttf, etc) from http://tour.khujbo.com/fonts/. Please correct your CSS with the right location.
BTW, my suggestion would be, you just place and load the CSS only from custom.css and remove all other definitions.
Hope this will solve your problem.
you must always be sure that the font is legal to use on your site.
However Firefox and Chrome should both support TTF.
get more info from here.
be sure u converted font to all format try this site to do http://everythingfonts.com/font-face and the path should be right !
#font-face {
font-family: 'GE SS Unique';
src: url('../../fonts/GE_SS_Unique_Light.eot');
src: url('../../fonts/GE_SS_Unique_Light.eot?#iefix') format('embedded-opentype'),
url('../../fonts/GE_SS_Unique_Light.woff') format('woff'),
url('../../fonts/GE_SS_Unique_Light.ttf') format('truetype'),
url('../../fonts/GE_SS_Unique_Light.svg#GE_SS_Unique_Light') format('svg');
font-weight: normal;
font-style: normal;}
h1,h2,h3,h4,h5,h6{
font-family: 'GE SS Unique';
}