I can't load font awesome in fonts directory, in font awesome there is icon style like :
.fa-star:before {
content: "\f005";
}
I want to get content: "\f005"; and put in my own style, but I think the directory fonts not load, how to load font awesome file in directory fonts?
I have try to add this code to my style:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
and copy fonts folder.
here my style code:
.example li a:before {
float: left;
font-size: 10px;
content: "\f005";
}
here my directory structure
- assets
-- css
mystyle.css
-- fonts
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
just add font-family for your custom class
.fa-star{
font-family: 'FontAwesome';
}
.fa-star:before {
content: "\f005";
}
Related
When I start my website on localhost everything works perfectly fine.
But when I start it on my plesk webserver the Icomoon icons don't show up.
The font is saved like this https://static.my-domain.example/fonts/icomoon.ttf.
The css is saved like this https://static.my-domain.example/css/main.css.
All other fonts load in so it looks like a problem of Icomoon.
This is some example css:
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?2ljhe1');
src: url('../fonts/icomoon.eot?2ljhe1#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?2ljhe1') format('truetype'),
url('../fonts/icomoon.woff?2ljhe1') format('woff'),
url('../fonts/icomoon.svg?2ljhe1#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
#import url(../fonts/icomoon.ttf);
.setting-icon::before{
display: block;
content: '\e908';
font-family: 'icomoon' !important;
margin-top: 5px;
margin-left: 5px;
}
Try to delete the #import it expects a css resource but not a font file url.
#font-face {
font-family: "icomoon";
src: url("../fonts/icomoon.eot?2ljhe1");
src: url("../fonts/icomoon.eot?2ljhe1#iefix") format("embedded-opentype"),
url("../fonts/icomoon.woff?2ljhe1") format("woff"),
url("../fonts/icomoon.ttf?2ljhe1") format("truetype"),
url("../fonts/icomoon.svg?2ljhe1#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
.setting-icon::before {
display: block;
content: "\e908";
font-family: "icomoon" !important;
margin-top: 5px;
margin-left: 5px;
}
Besides, I recommend preferring woff since it offers better compression.
You should also check debugging info via dev tools (Ctrl + Shift + I). If there is some 404 notice regarding for font files – you'll need to check if those files are stored in the right place or tweak your path/url parameters.
I am using Sass for my project and I am getting this error on my home page while importing fonts from my custom fonts folder of Merriweather.The problem is that when i check the network tab on chrome it shows that Agenda font file is included but not the merriweather font file.Both Agenda and Merriweather fonts are in separate folders.
Error :
**http://localhost/project-name/fonts/Merriweather/Merriweather-Italic.tff net::ERR_ABORTED 404 (Not Found)**
My Project folder structure in like this:
project-folder/fonts-folder/Merriweather-folder/All fonts of Merriweather here
project-folder/fonts-folder/Agenda-folder/All fonts of Agenda here
project-folder/scss-folder/partials-folder/global.scss
project-folder/scss-folder/variables.scss
QUESTIONS:
I want to know the is my syntax right for importing multiple fonts
from the same font family like Merriweather ?
what exactly i am doing wrong in variables.scss ??
Please help me to resolve this issue.
Code in Variables.scss
#font-face {
font-family: Agenda;
font-weight: 500;
font-style: normal;
src: url("../fonts/Agenda/Agenda-Medium.otf") format("opentype");
}
#font-face {
font-family: Merriweather-Italic;
font-weight: normal;
font-style: italic;
src: url("../fonts/Merriweather/Merriweather-Italic.tff") format("truetype");
}
#font-face {
font-family: Merriweather-Regular;
font-weight: normal;
font-style: normal;
src: url("../fonts/Merriweather/Merriweather-Regular.tff") format("truetype");
}
This is how i am using fonts in globals.scss
#import "../variables";
body{
font-family: Merriweather-Regular;
font-size: 22px;
background-color: $white;
}
h1{
font-family: Merriweather-Italic;
font-style: italic;
font-size: 94px;
}
h2{
font-family: Merriweather-Regular,Merriweather-Italic;
font-size: 42px;
}
h3{
font-family: Agenda;
font-size: 30px;
}
h4{
font-family: Merriweather-Regular;
font-style: bold;
font-size: 27px;
}
h5{
font-family: Merriweather-Regular;
font-size: 26px;
}
To be sure I would have to see a screenshot of your fonts folder, but I think the font isn't found because of typo in the font-face declaration. True-type font files usually have a .ttf extension instead of .tff.
That means you would have to adjust your #font-face declaration from:
#font-face {
// omitted font-family, weight and style for clarity
src: url("../fonts/Merriweather/Merriweather-Italic.tff") format("truetype");
}
to:
#font-face {
// omitted font-family, weight and style for clarity
src: url("../fonts/Merriweather/Merriweather-Italic.ttf") format("truetype");
}
At this point, so in variables.scss, I usually also declare a font variable for each font (type) for usage in the rest of my SASS files, e.g $merriweather--italic: "Merriweather-Italic", serif;
Therefore you can use these variables in your global.scss as such:
h1{
font-family: $merriweather--italic;
font-size: 94px;
}
I want to use fontlero font for my page and I downloaded the .ttf file. And I include it in my main CSS but this gave me some other font. here is my css code:
#font-face {
font-family: FONTLERO;
src: url(fonts/FONTLERO.TTF);
}
.customfont {
font-family: "FONTLERO";
src: url('../fonts/FONTLERO.TTF') format('embedded-opentype'),
url('../fonts/FONTLERO.TTF') format('opentype');
}
.story h1 {
font-family: FONTLERO;
font-size: 120px;
}
Path should be inside the CSS folder like below
css/fonts/FONTLERO.TTF
#font-face {
font-family: 'Snell Roundhand Script';
src: url('../fonts/snell-roundhand-script.eot');
src: url('../fonts/snell-roundhand-script.eot?#iefix') format('embedded-opentype'), url('../fonts/snell-roundhand-script.woff') format('woff'), url('../fonts/snell-roundhand-script.ttf') format('truetype'), url('../fonts/snell-roundhand-script.svg#Snell Roundhand Script') format('svg');
}
#font-face {
font-family: 'Baskerville Old Face';
src: url('../fonts/ufonts.com_baskerville-old-face.eot');
src: url('../fonts/ufonts.com_baskerville-old-face.eot?#iefix') format('embedded-opentype'), url('../fonts/ufonts.com_baskerville-old-face.woff') format('woff'), url('../fonts/ufonts.com_baskerville-old-face.ttf') format('truetype'), url('../fonts/ufonts.com_baskerville-old-face.svg#Baskerville Old Face') format('svg');
}
The above code is the font-face code
And below i am poting the css i have added:
.big-red-text{
color: #ff0000;
font-family: Snell Roundhand Script;
font-size: 50px;
text-align: center;
}
.big-orange-text{
color: #ff6600;
text-align: center;
font-weight: 600;
font-family: Baskerville Old Face;
}
Is there something missing in this? For it not to take the font into consideration? All the fonts are stored in the font folder in the root directory.
If your font name contains spaces, you have to enclosure it in single quotes.
Without spaces in the name you can lose the single quotes but I suggest to always use them to avoid mistakes.
So as Fundhor suggests it will work with
font-family: 'Snell Roundhand Script';
and
font-family: 'Baskerville Old Face';
Make sure your files are in the right place:
- css
-- fonts.css <-- here you are declaring your #font-face
- fonts
-- snell-roundhand-script.eot
-- etc...
Additionally include your fonts.css before you are using the font-family
Try with this :
.big-red-text{
color: #ff0000;
font-family: 'Snell Roundhand Script';
font-size: 50px;
text-align: center;
}
Did you purchase the font or font-family?
Url:https://www.fonts.com/font/linotype/snell-roundhand
The support team at fonts.com should be able to resolve your issue.
I have a problem when I choose a font in a CSS file. The font doesn't appear correctly in local HTML code.
#main_menu ul li
{
border-left:1px solid #dad8d8;
font-family:"arabic transparent";
font-size:16px;
padding: 0px 20px;
color: #e2001a;
list-style: none;
display: inline;
font-weight: bold;
}
The font in the HTML file isn't like in the Photoshop design.
You better use #font-face from CSS3. Example from W3School:
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
You have to embbed the font
Use the following website for font generation
www.fontsquirrel.com/fontface/generator
#font-face {
font-family: 'YourFont';
src: url('YourFont.eot');
src: url('YourFont.eot?#iefix') format('embedded-opentype'),
url('YourFont.woff') format('woff'),
url('YourFont.ttf') format('truetype'),
url('YourFont.svg#YourFont') format('svg');
font-weight: normal;
font-style: normal;
}
You cannot just use any font on the web/in HTML. You have something called web-safe fonts and can add custom ones manual.
Check FontSquirrel for conversion techniques: http://www.fontsquirrel.com
If a font is on your local machine, it "can" work if the browser tries to look for it, but you can't rely on it as most other users that visit your website won't have it on theirs, making the font fallback to Arial or an alike default font.
Font-squirrel will give you these formats (name is an example);
arabic.eot
arabic.svg
arabic.ttf
arabic.woff
With all these included all major browsers should be able to read your custom font with the #font-face property:
#font-face {
font-family: 'arabic transparent';
src: url('arabic.eot');
src: url('arabic.eot?#iefix') format('embedded-opentype'),
url('arabic.woff') format('woff'),
url('arabic.ttf') format('truetype'),
url('arabic.svg#arabic_transparent') format('svg');
font-weight: normal;
font-style: normal;
}
#main_menu ul li {
font-family: 'arabic transparent';
}