CSS font is not working regardless any change that i made - html

Hi I know that there are some topic regarding this matter but rest assured i have been looking for solution in those topics but i could not find any solution.
I have tried my best but it still won't get fixed.
So this is my CSS font:
#font-face {
font-family: 'quicksandregular';
src: url('font/quiksand2/quicksand-regular-webfont.eot');
src: url('font/quiksand2/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/quiksand2/quicksand-regular-webfont.woff2') format('woff2'),
url('font/quiksand2/quicksand-regular-webfont.woff') format('woff'),
url('font/quiksand2/quicksand-regular-webfont.ttf') format('truetype'),
url('font/quiksand2/quicksand-regular-webfont.svg#quicksandregular') format('svg');
font-weight: normal;
font-style: normal;
}
and here is the body css
body {
font-size: 12px;
padding: 0;
height: 100%;
width: 100%;
margin: 0;
background-color: #f7f2e2;
font-family: Quicksand;
letter-spacing: -1px;
overflow: auto;
position: absolute;
}
somehow the font is still not show up in my site. It did show up when i have Quicksand font installed in my PC but as soon as i removed the quicksand font, the font switched into a default serif font. This is not what i really wanted since i want other PC to be able to show the font that i used, which is quicksand.
I did check up the font folder is exactly the same in my root folder. By my understanding, the quicksand font should be showing.
The question is, what is my mistake? I would be happy if someone responded to me and reply within 1 day maximum.

You will have to put '' and your font inside that. As this is how it is being generated in the css.
Example:
font-family: 'quicksandregular';
Hope this works.

Everthing is fine but you need to change is the css that is applied
and here is the body css
body {
font-size: 12px;
padding: 0;
height: 100%;
width: 100%;
margin:0;
background-color: #f7f2e2;
font-family: quicksandregular;
letter-spacing: -1px;
overflow:auto;
position:absolute;
}

Just make the following change to your code it will work.
font-family: quicksandregular;

Inside your #font-face, you have declared the font-family property to quicksandregular. Hence, you have to use font-family: 'quicksandregular' or font-family: quicksandregular in your CSS code.
Also, a good thing to do would be to rename the #font-face to QuickSand, and have multiple QuickSand font-faces with different font-weight properties, because this will allow you to use it in structures like this:
.myRegularText {
font-family: 'QuickSand';
font-weight: regular;
}
.myBoldText {
font-family: 'QuickSand';
font-weight: bold;
}
I can't know weather you have a problem with file path or not, since I cannot see the structure of your server's directory, but we assume the following structure:
<root> /
style/
main.css
font/
quicksand2/
<font-files>
In this case, you will have to use
#font-face {
font-family: 'QuickSand';
src: url('/font/quicksand2/<file-name>');
// ..
}
or
#font-face {
// ...
src: url('../font/<file-name>');
// ...
}
Hope that helps.

Related

How do I actually import external fonts to my website (CSS)

I searched the web and look for ways to add an external fonts to the web or CSS. I know we should use #font-face to do that. But, my website doesn't load the font when I reload. Can someone see the problems for me?
This is my codes:
<style>
#font-face {
font-family: 'vcr_osd_monoregular';
src: url('vcr_osd_mono-webfont.woff2') format('woff2'),
url('vcr_osd_mono-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1 {
font-size: 90px;
font-family: "vcr_osd_monoregular", sans-serif;
color: yellow;
}
</style>```
Instead of printing out vcr_osd_monoregular font, it prints out sans-serif. Please help.

Mobile Firefox and Chrome not recognizing #font-face

I am using a particular font on my website. Firefox and Chrome recognize it on the PC (locally and server), but not on mobile (Firefox and Chrome). I am using #font-face in my CSS file.
I have the fonts uploaded on the server. I don't know what to try since it does work on the computer. Any help greatly appreciated.
Here is my HTML:
<div class="welcome">WELCOME</div><div class="home">HOME</div>
Here is my CSS:
#font-face {
font-family: 'typographicaregular';
src: url('../fonts/typographica.regular-webfont.woff') format('woff2'),
url('../fonts/typographica.regular-webfont.woff2') format('woff');
font-weight: normal;
font-style: normal;}
.welcome {
width: 47%;
padding: 0;
margin: 0 auto;
font-family: 'typographicaregular', sans-serif;
font-size: .7em;
letter-spacing: 26px;
text-align: center;
color: #004391;
}
.home {
width: 85%;
padding: 0;
margin: -40px auto 0;
font-family: 'typographicaregular', sans-serif;
letter-spacing: 12px;
font-weight: bold;
font-size: 1.6em;
text-align: center;
color: #004391;
}
It should show the actual font on my Android phone and iPad, not a generic san-serif font.
This seems like a duplicate from: #font-face Not Working in Chrome for Android
The problem may be related to your font-family declaration (I can't tell because you haven't posted that part). If, for example, you had this:
font-family: fghjkjh, 'jump_startregular', sans-serif;
...Chrome for Android would simply pretend that fghjkjh is installed (but really use the default Android font) and ignore everything else. (Not sure if this is a bug or a feature.)
In which case, the solution is to move 'jump_startregular' to the front - and possibly add a local source to the #font-face block instead, which probably causes problems with other older browsers.
"Taken word for word from the link mention above"
If this doesn't work, I suggest you use google fonts instead.

Why my Web custom font is not being applied?

I have a custom font in my Web site, and I uploaded it to my site.
This is my site.
I want to apply all my Web the oswaldlight. Since now, I've uploaded the font into a known folder for me and added it as a #font-face like this:
#font-face {
font-family: 'oswaldlight';
src: url('../font/oswald/oswald.light-webfont.eot');
src: url('../font/oswald/oswald.light-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/oswald/oswald.light-webfont.woff2') format('woff2'),
url('../font/oswald/oswald.light-webfont.woff') format('woff'),
url('../font/oswald/oswald.light-webfont.ttf') format('truetype'),
url('../font/oswald/oswald.light-webfont.svg#oswaldlight') format('svg');
font-weight: normal;
font-style: normal;
}
This piece of code has been added in my ftp. And if you check which font is using each heading, you see this using Firebug:
element.style {
color: #000000;
font-size: 24px;
font-weight: normal;
line-height: 40px;
margin: 12px 0 0;
padding: 0;
text-align: left;
text-transform: uppercase;
}
*::before, *::after {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
.heading h2 {
font-family: "oswaldlight";
font-size: 24px;
font-weight: normal;
line-height: 30px;
text-transform: uppercase;
}
But it's still not being applied to my heading. Any idea why it's not being applied?
EDIT: I saw the error that #Lucky Chingi mentions. I added to my .htcaccess the following lines:
# BEGIN WordPress
Header add (also tried 'set') Access-Control-Allow-Origin "*"
# END WordPress
But it still doesn't work... Any suggestions?
You don't need to host your fonts on your page. Google delivers fonts fast.
So you can do:
#import url(https://fonts.googleapis.com/css?family=Oswald);
This imports the font as 'Oswald' using #font-face. If you type the above URL into the browser, you also see that it dynamically loads different files depending on which browser you're using. Try on Firefox and on Chrome to see for yourself.
Now wherever you want Oswald, simply type:
font-family: Oswald;
Also, for best results, load your font-faces before loading any other CSS.
Finally it was a problem with my Web domain that was pointing to another private domain. After a while, it ended pointing to my destiny domain. Thanks boys!
try
*{font:100%/1.0 'oswaldlight';}
make sure your path to that font-file(s) are correct
and, remove headers if possible, some browsers behave differently with some headers

external font does not work in Foundation.Zurb CSS

i want to add external font "Droid Serif" and i put the fontface in the foundation.css file.
here is the code
#font-face{ font-family: 'MyWebFont';
src: url('../font/DroidSerif-Bold-webfont.eot');
src: url('../font/droid-bold/DroidSerif-Bold-webfont.eot?iefix') format('eot'),
url('../font/droid-bold/DroidSerif-Bold-webfont.woff') format('woff'),
url('../font/droid-bold/DroidSerif-Bold-webfont.ttf') format('truetype'),
url('../font/DroidSerif-Bold-webfont.svg#webfont') format('svg'); }
now, i call the name in body
body {
background: #edebda;
color: #222222;
padding: 0;
margin: 0;
font-family: "MyWebFont","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
cursor: default; }
but it wont take the font ? why is it so? I 've checked the path of the file and i am sure its right. is there anything wrong with the way foundation works?
i really need your help ppl !
I've done it with Zurb Foundation without problems. Your font-face code seems good to me...
Have you tried to apply these font properties to a single item (not to body)? For example, enclose them into a class name (.apply-font) and apply it to a div or a span. Does it works? If not, maybe there's a path problem to your font files. But you're sure that's not the problem...
If it works, it could be that your body definition goes before the body one created by zurb when it compiles the file _globals.scss, and the second one overrides the first. To test if that's the problem, you could use the !important declaration to your font-family. This is the way to say that it doesn't matter where it's declared, this is the one to use.

Padding issues (?) with custom icon font. Example below

I have created an icon font using custom .svg icons and I am having a problem with the padding (or possibly something else). The icons I used to not include any padding, in case that question comes up.
For some reason, the icons seem to have shifted above where they should be and I can't find any way to get them back down into the container. Here is an example of what I am talking about: http://i.imgur.com/RwOKWLp.png
I have set the "background-color" to yellow to highlight my problem.
Here is the HTML for one icon:
<div class="vicon" aria-hidden="true" data-icon=""></div>
Here is the CSS that I am currently working with:
[data-icon]:before {
font-family: 'iconfont';
content: attr(data-icon);
speak: none;
font-size: 100%;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.vicon {
display: inline-block;
font-size: 50px;
margin-top: 1em;
background-color: yellow;
}
#font-face code:
#font-face {
font-family: 'iconfont';
src:url('[font_location_on_company_server].eot');
src:url('[font_location_on_company_server].eot?#iefix') format('embedded-opentype'),
url('[font_location_on_company_server].woff') format('woff'),
url('[font_location_on_company_server].ttf') format('truetype'),
url('[font_location_on_company_server].svg#icon_font') format('svg');
font-weight: normal;
font-style: normal;
}
Does anyone have any idea why this might be happening?
The problem is not CSS but your font's baseline height (see http://icomoon.io/#docs/font-metrics)
It means the font metrics are wrong. I don't know if you have them changed or if it was a bug from Icomoon but I've been able to export a correct font right now.
Anyway you cannot (or at least you shouldn't) "correct" this with CSS. The best way is to change the font.