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;
}
Related
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.
I integrated a font into my web project. Here comes the CSS code:
#font-face {
font-family: 'vladimirscriptefregular';
src: url('fonts/vladimirscriptef-webfont.eot');
src: url('fonts/vladimirscriptef-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/vladimirscriptef-webfont.woff') format('woff'),
url('fonts/vladimirscriptef-webfont.ttf') format('truetype'),
url('fonts/vladimirscriptef-webfont.svg#vladimirscriptefregular') format('svg');
font-weight: normal;
font-style: normal;
}
My problem is that the font is not displayed in Firefox - instead, Times New Roman is displayed. In all other browsers the font is displayed correctly.
Does anyone see what's missing in my code?
Try the code below:
#font-face {
font-family: 'vladimirscriptefregular';
-moz-font-family:'vladimirscriptefregular';
src: url('fonts/vladimirscriptef-webfont.eot');
src: url('fonts/vladimirscriptef-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/vladimirscriptef-webfont.woff') format('woff'),
url('fonts/vladimirscriptef-webfont.ttf') format('truetype'),
url('fonts/vladimirscriptef-webfont.svg#vladimirscriptefregular') format('svg');
font-weight: normal;
-moz-font-weight:normal
font-style: normal;
-moz-font-style:normal
}
Firefox has a list of fonts which can be used in its whitelist.
It can be accessed by typing "about:config" in the address bar.
Then search for "font.system.whitelist".
Here add your font name which must be present in the Font folder.
For windows the default location is "C:\Windows\Fonts"
So I downloaded a new font called "Alef". It's in hebrew, but that's irrelevant as I'm unable to activate it. I'm pretty sure I'm doing something really stupid but I've been trying for hours to apply it but with no avail.
What I got:
8 files:
4 x normal eot, svg, ttf, woff
4 x bold eot, svg, ttf, woff
And a stylsheet file called stylesheet.css, which now contains the following code:
#font-face {
font-family: 'Alef';
src: url("/wp-content/themes/duet/Alef-bold.eot");
src: url("/wp-content/themes/duet/Alef-bold.eot?#iefix") format('embedded-opentype'),
url("/wp-content/themes/duet/Alef-bold.woff") format('woff'),
url("/wp-content/themes/duet/Alef-bold.ttf") format('truetype'),
url("/wp-content/themes/duet/Alef-bold.svg#alefbold") format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Alef';
src: url("/wp-content/themes/duet/Alef-regular.eot");
src: url("/wp-content/themes/duet/Alef-regular.eot?#iefix") format('embedded-opentype'),
url("/wp-content/themes/duet/Alef-regular.woff") format('woff'),
url("/wp-content/themes/duet/Alef-regular.ttf") format('truetype'),
url("/wp-content/themes/duet/Alef-regular.svg#alefregular") format('svg');
font-weight: normal;
font-style: normal;
I have uploaded all files to my theme directory: /wp-content/themes/duet/
My main CSS file is called style.css, which is also in the same directory, I added this code to the file:
#font-face{
font-family: 'Alef';
src: url('Alef.eot');
src: url('Alef.eot?#iefix')
format('embedded-opentype'),
url('Alef.woff') format('woff'),
url('Alef.ttf') format('truetype'),
url('Alef.svg#webfont') format('svg');
}
Then what I did, was add this line to my header.php:
<link rel="stylesheet" href="/wp-content/themes/duet/stylesheet.css" type="text/css" charset="utf-8" />
And of course I set my p {font-family: Alef;)
What am I doing wrong? I'm getting 404 errors for the files in Chrome's console. It shows the CORRECT URL in the right side of the error console though.
I use this tool almost obsessively. Saves me the time of working out bugs just like this one.
http://www.fontsquirrel.com/tools/webfont-generator
Best tool ever.
Two main issues:
You are referencing 12 different files but you only have 8 (Alef.eot,
etc.; Alef-regular.eot, etc.; Alef-bold.eot, etc.)
I think your 2 'src' statements per declaration is messing things up. Should only be one with url's separated by commas.
Here is what I would do:
Remove the font-face declaration in style.css. Move the font-face declarations out of stylesheet.css and into style.css.
Only use one 'src' declaration with all url's separated by commas.
Here is the code I would use: (your file paths substituted):
`#font-face {
font-family: 'Alef';
src: url('/wp-content/themes/duet/Alef-regular.eot?#iefix') format('embedded-opentype'),
url('/wp-content/themes/duet/Alef-regular.woff') format('woff'),
url('/wp-content/themes/duet/Alef-regular.ttf') format('truetype'),
url('/wp-content/themes/duet/Alef-regular.svg#Alef') format('svg');
font-weight: normal;
font-style: normal;
}
ADDITION: Of course, here is bold version...
`#font-face {
font-family: 'Alef';
src: url('/wp-content/themes/duet/Alef-bold.eot?#iefix') format('embedded-opentype'),
url('/wp-content/themes/duet/Alef-bold.woff') format('woff'),
url('/wp-content/themes/duet/Alef-bold.ttf') format('truetype'),
url('/wp-content/themes/duet/Alef-bold.svg#Alef') format('svg');
font-weight: bold;
font-style: normal;
}
I am trying to get a custom font to work in the Bones Wordpress theme. My font family is in "library > fonts" folder just like theme instructions.
#font-face {
font-family: 'ColaborateThinRegular';
src: url('library/fonts/ColabThi-webfont.eot');
src: url('library/fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/ColabThi-webfont.woff') format('woff'),
url('library/fonts/ColabThi-webfont.ttf') format('truetype'),
url('library/fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
font-weight: normal;
font-style: normal;
}
and I call it in my stylesheet like this:
font-family: 'ColaborateThinRegular';
I have tried a bunch of different fonts and none work. What am I missing here?
I had the same problem on bones and used the relative path to step up one directory to fix it. For you it should be something like this:
#font-face {
font-family: 'ColaborateThinRegular';
src: url('../fonts/ColabThi-webfont.eot');
src: url('../fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/ColabThi-webfont.woff') format('woff'),
url('../fonts/ColabThi-webfont.ttf') format('truetype'),
url('../fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Hope this helps!
Ok so I downloaded a #font-face kit from fontsquirell, it works fine in the demo html file included in the download, but fails to render when I put it in any other file or sub folder.
I have checked the file structure and linked accordingly, i am still having this problem. Any suggestions on what I should do?
#font-face {
font-family: 'BreeSerifRegular';
src: url('..assets/fonts/BreeSerif-Regular-webfont.eot');
src: local("☺")
url('..assets/fonts/BreeSerif-Regular-webfont.eot?#iefix') format('embedded- opentype'),
url('..assets/fonts/BreeSerif-Regular-webfont.woff') format('woff'),
url('..assets/fonts/BreeSerif-Regular-webfont.ttf') format('truetype'),
url('..assets/fonts/BreeSerif-Regular-webfont.svg#BreeSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The same format works for other fonts, dunno why its not working for this.
Its the basic problem with paths
Copy the fonts you receive and into a folder at the root lets say a font.
Then point your css to read the file in a relative pattern like
#font-face {
font-family: 'BreeSerifRegular';
src: url('fonts/BreeSerif-Regular-webfont.eot');
src: local("☺")
url('fonts/BreeSerif-Regular-webfont.eot?#iefix') format('embedded- opentype'),
url('fonts/BreeSerif-Regular-webfont.woff') format('woff'),
url('fonts/BreeSerif-Regular-webfont.ttf') format('truetype'),
url('fonts/BreeSerif-Regular-webfont.svg#BreeSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}
UPDATE
The way you are defining relative path is wrong
Change ..assets to ../assets