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.
Related
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
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.
Ran into a strange problem. I'm using Factor Font for the first part of the title and another font for the second part of the title. I uploaded the .ttf files and linked to them in the css. It's showing up on my mac (chrome, safari, mobile), but not on someone else's computer (chrome, mozilla, even mobile). I have no idea what the problem could be. This is how it should look:
This is how it looks when it's wrong.
Like I said, it's uploaded to the server just fine because I use a certain font for "Life Blog" so that font is loaded and used correctly. What could be the problem??? Is it this font? Here's my css code:
#font-face{
font-family: "Factor";
src: url("..//fonts/factor.ttf");
}
#font-face{
font-family: "Mamma Gamma";
src: url("..//fonts/MammaGamma.ttf");
}
#title h1{
font-family: "Factor";
font-size: 46px;
margin-bottom: -30px;
}
#title h2{
font-family: "Mamma Gamma";
font-size: 80px;
margin-bottom: -25px;
}
And here's the html...it's all really simple:
<div id="title">
<h1>Elena Ikovleva</h1>
<h2>Life Blog</h2>
</div>
On the left is Chrome and on the right is IE9.
As you can see with the image above, even with the Meyer CSS Reset there are yet inconsistencies between browsers. Two examples in this image:
IE9 clearly has a darker font for just about all text.
For whatever reason, the <hr/> tags aren't lining up (but they sure are close) and that throws off the rest of the content.
Is there something more I need to do, other than applying the Meyer CSS Reset to get some more consistency between these browsers?
Additionally, with the content you see above, other than colors and font sizes, there are no margins or padding applied after the reset.
CSS
h1 {
font-family: Lato;
font-size: 26px;
font-weight: normal;
color: #154995;
}
h2 {
font-family: Lato;
font-size: 24px;
font-weight: normal;
color: #333333;
}
h3 {
font-family: Lato;
font-size: 20px;
font-weight: normal;
color: #154995;
}
h4 {
font-family: Lato;
font-size: 18px;
font-weight: bold;
color: #333333;
}
h5 {
font-family: Lato;
font-size: 16px;
font-weight: bold;
color: #333333;
}
.small-text {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: regular;
color: #333333;
}
The differences you point out are all based on the fact that two different fonts are being used in your chrome and IE9 outputs. Once you tweak the css font-family so both browsers use the same font then it should be ok.
UPDATE:
After seeing your css, you're specifying only Lato font for your elements, it seems both chrome and IE9 can't find the font Lato so both are applying a default font, which is different from one to another, try specifying fallback fonts like:
font-family: Lato, Arial, sans-serif;
If above still give you different outputs then Lato is being picked in one browser and not other, you can check that by using:
font-family: Arial, sans-serif;
for all your elements and see the output is the same on both browsers.
UPDATE 2:
Also see instructions on how to add a Lato webfont to your website:
http://www.google.com/webfonts#UsePlace:use/Collection:Lato
According to me font-family you are using is probably not a system font, it's a web font so what's the thing here is 1 browser is taking up the web font and other is not, so the default Times New Roman font is used
The introduction of #font-face in CSS3 allows web designers to use fonts that look the same across all browsers. That is what I thought until trying it out with the following code in jsFiddle:
HTML:
<div>
The_Quick_Brown<br>
Fox_Jumps_Over<br>
The_Lazy_Dog
</div>
CSS:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
div {
display: block;
width: 496px;
height: 86px;
font-size: 1.3em;
font-family: 'Open Sans';
font-style: normal;
margin: 0;
border: 0;
padding: 0;
background: cyan;
letter-spacing: 1.44em;
line-height: 1.44;
overflow: hidden;
}
This is the view from Firefox 12.0. Take note of the partially obscured 'o' in 'brown', the position of 'g' in 'dog' and the underscore '_' at the bottom edge.
This is the view from Google Chrome 19.0.
Despite explicitly setting letter-spacing and line-height for the same font, why are the results still different?
Your code is correct. The problem is your browser/ Each browser (browser rendering engine to be specific) renders contents in a different manner. You may not get the exact same output from each browser all the time. The features and all other blings might be the same but it is almost always a different story in terms of rendering a web page.
we don't have nothing much to do in this issue. Its totally depends on the browser's text rendering engine. Every single browser renders text differently.