Why my Web custom font is not being applied? - html

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

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.

CSS font is not working regardless any change that i made

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.

Add font to website

I am trying to add Ubuntu font to my website, I'd like to have it universal on the site so everything is in that font but I started by just adding it to my h1 tag to see if it works, but it doesn't work. I have uploaded the font to my server.
This is my css so far:
#font-face {
font-family: 'Ubuntu';
src: url('ubuntu/Ubuntu-R.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Ubuntu', sans-serif;
font-weight : normal;
margin-top: 10px;
letter-spacing: -1px;
}
h1 {
font-family: 'Ubuntu', sans-serif;
color: #000;
margin-bottom : 0.2em;
font-size : 3em; /* 96 / 16 */
line-height : 1.4;
}
I'm probably being really stupid, as usual. I've looked at other examples but can't really see what I am doing wrong.
The problem can be solved in 2 ways.
You can either add the google font cdn to the head tag of your website if already hosted or if you have active internet access, so you don't need to worry adding it locally in your folder.
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
Like so
Or probably your file path location is wrong
if your fonts are packed the root directory, you can easily call it like
src: url('Ubuntu-R.ttf') format('truetype');
But if it is in a folder (e.g ubuntu)
it can be src: url('ubuntu/Ubuntu-R.ttf') format('truetype');
But if in a very long path.. try doing something like this
src: url(../ubuntu/Ubuntu-R.ttf);
Then calling the font-family attribute, call just "one" name, if it is locally in a folder. like so
#font-face {
font-family: Ubuntu;
src: url(ubuntu/Ubuntu-R.ttf);
}
.myclass{
font-family:Ubuntu; // The exact name for the #font-face
}
Hope it helps
It is as simple as adding this line as the first line of your style.css or whatever you call it:
#import url(http://fonts.googleapis.com/css?family=Ubuntu);
It takes care of everything, and then you can just start using it in your css:
.ubuntu-font {
font-family: "Ubuntu";
}
If you'd like bold and italic or some other things as well, you can just go here, pick those that you want, and copy the #import from section 3 in that page.
Also, with this you do not need to upload the font to your server, I don't see why everyone should upload all fonts to their server when there are several fast CDNs that already have everything there.

Web font not showing in Firefox

http://miche.com/
This is the strangest thing. We're using two web fonts and their varying weights on the above page: Benton Sans and Jubilat, both of which we have licenses for. The h2 ("Interested in joining Miche?" "Already a Miche Representative?") is set to be Jubilat Regular, and is properly showing up in Firefox; however, the h1 ("Welcome!") is Jubilat Light, and appearing as Times New Roman.
Both weights are generated with Font Squirrel.
Both are hosted on the same server.
Both are coded in the same way.
I've reuploaded the files.
I've tried if IE so FF doesn't try to use .eot.
Before you say it: Yes, I have tried Bulletproof.
Why is Regular showing up when Light isn't? I wonder if I'm just not using the right combination of CSS.
#font-face {
font-family: 'JubilatLight';
src: url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.eot');
src: url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.eot?#iefix') format('embedded-opentype'),
url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.woff') format('woff'),
url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.ttf') format('truetype'),
url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.svg#JubilatLight') format('svg');
font-weight: normal;
font-style: normal;
}
#main-container h1.jubilat {
font-family: "JubilatLight";
font-weight: normal;
font-size: 40px;
color: #701271;
text-align: center;
}
I figured it out. Firefox wasn't accepting absolute links, and instead wanted relative. Coupled with Mo'Bulletproof, I was able to get it to show up like so:
#font-face{ /* for IE */
font-family:JubilatLight;
src:url(/FileUploads/CMS/Documents/jubilatlightwebfont.eot);
}
#font-face { /* for non-IE */
font-family:JubilatLight;
src:url(http://:/) format("No-IE-404"),url(/FileUploads/CMS/Documents/jubilatlightwebfont.ttf) format("truetype");
}
#main-container h1.jubilattest {
font-family: "JubilatLight";
font-weight: normal;
font-size: 40px;
color: #701271;
text-align: center;
}
and then my HTML:
<div id="main-container">
<h1 class="jubilattest">WELCOME!</h1>
</div>
Now that I've figured that out, I'll be able to fix the other fonts. Thank you three for your suggestions.
Just want to let you know, there's also a way by configuring the htaccess (discribed by Yu-Jie Lin)
his code:
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Your fonts are not correctly uploaded/linked.
jubilatlightwebfont.woff for example gives a 404 error.
Take a look at the Web-Console of Firefox. It throws some errors, for example:
downloadable font: download failed (font-family: "JubilatLight" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed
source: https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.ttf # https://www.miche.com/FileUploads/CMS/Documents/MicheCorp092911v2.css
(btw: the h2 elements use Times New Roman too, for me.)
I took a look at your CSS and it looks like you aren't correctly defining your font for your H2, so it's defaulting to TimesNewRoman:
#main-container h2.jubilat {
color: #701271;
font-family: "jubilat"; // <----------------
font-size: 18px;
font-weight: normal;
text-align: center;
}
try to use implemented base64-encoded font-files within the css-doc:
#font-face {
font-family:"font-name";
src:url(data:font/opentype;base64,[paste-64-code-here]);
font-style:normal;
font-weight:400;
}
source: http://sosweetcreative.com/2613/font-face-and-base64-data-uri
it worked perfectly...