This is my first time using detail fonts but for some reason it loses all of its detail.
Expected result:
Actual result:
footer h3 {
font-family: "Elegance";
font-size: 50px;
position: relative;
right: 30px;
}
#font-face {
font-family: "Elegance";
src: url("../fonts/GeraldinePersonalUseItalic-PK12m.ttf");
}
<footer>
<h3>Greetings</h3>
</footer>
I believe you have your font weight set to bold in your CSS somewhere.
I was able to reproduce this issue by setting my font-weight to bold.
Try changing it to normal/400 and see if that fixes it.
Related
I am encountering an issue with the font in a webpage I am making.
I have a font called Gotham for the main copy and I have it in the CSS as:
body * {
font-size: 1em;
font-family: Gotham;
}
I have also got a separate font used just for the company logo. I have added them in using font-face as below:
#font-face {font-family: neosans; src: url("../fonts/neo_sans/NeoSan");}
#font-face {font-family: neosans; src: url("../fonts/neo_sans/NeoSans-Bold"); font-weight: bold;}
Basically I am wanting to make company logo by using the neosans font as follows:
CompanyLogo
So I have this:
<h1><b>Company</b>Logo</h1>
And CSS as:
.splash-title h1 {font-family: neosans; font-size: 6.5em; margin: 0; padding: 0;}
But for some reason, the bolded word in the company logo is reverting to the Gotham font in bold, not the neosans. I initially thought it may be the NeoSans-Bold file, or font-family screwing something up and therefore making it Gotham, but I changed the Body * font family to neosans and it the logo looks as I want it to.
Okay, I think I have fixed this.
Originally I had:
body * {
font-size: 1em;
font-family: Gotham;
}
I have just taken the Asterisk * out of the body in CSS and that seems to have done the trick. I have just been reading about it and I must have used it without fully understanding what it does.
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.
I've taken to using rem's to size fonts in recent projects, then using px as a fallback for older versions of IE.
I've also been setting a font-size of 62.5% on thehtml so I can more easily set font sizes later on in the stylesheet, I then set a font-size of 1.4rem on the body so unstyled elements have a base font-size of at least 14 pixels, see the code below:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
The problem is, Chrome seems to handle this in a strange way ... Chrome seems to set the font sizes correctly on the inital page load, but on subsequent refreshes the font sizes are way bigger than they should be.
SEE FIDDLE (HTML copied below for future reference)
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
</body>
</html>
Remember, you might need to hit run once or twice in Chrome to see said effect.
Does anybody know what is causing this or if there's a way around it? Am I committing a crime by setting a 62.5% font-size on the html element (I realise there are arguements against doing so)?
The easiest solution that I have found is to simply change the body definition to
body {
font-size: 1.4em;
}
Because it is the body, you don't have to worry about compounding – just use rems everywhere else.
Try:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial; }
Seems to look better on refreshing the page :)
FIDDLE
Yes, this is a known bug in Chrome, which has been linked already.
I found
html { font-size: 100%; }
seems to work for me.
The * selector is very slow, as the author of this bug in Chrome, I'd advise a workaround like this until the bug is fixed:
body > div {
font-size: 1.4rem;
}
Provided you always have a wrapper div anyway ;)
This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem
The answer of Patrick is right.
We have the same issue on Android 4.4.3 WebView.
Before:
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
After:
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
}
With em and not rem, it works !
The way I fix this is by setting an absolute font-size in the body-element. For all the other font-sizes I use rem:
html {
font-size: 62.5%;
}
body {
font-size: 14px;
}
.arbitrary-class {
font-size: 1.6rem; /* Renders at 16px */
}
I have a odd issue on my "in-development" website here: http://www.cphrecmedia.dk/musikdk/stage/
The H1-h6 fonts are just "sans-serif", but often in Chrome it shows another font (screenshot: http://cl.ly/image/260B0H0l1w0C). When the mouse hover the navigation it changes to the right font. FYI this is how it should look like: http://cl.ly/image/442l071M3N1B
The code used for font is:
.nm li a {
float: left;
font-family: sans-serif;
height:22px;
padding: 12px 14px 7px 14px;
color:#white;
font-size: 12px;
line-height: 20px;
}
I mainly develop using Chrome, so I'm not sure if the issue is present in other browsers. Have anyone of you seen this issue before?
'sans-serif' is not a font name it's a font family specification.
Use a sans-serif font name like "Arial" or "Verdana" or else you will have unexpected results (the browser may replace your font with generic ones).
Try using custom font method by downloading the font and keeping it in your fonts folder.
Example:
#font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{ font-family:myFirstFont; }
Try using custom web font from google:
http://www.google.com/fonts
Select a font and uses one of the three metods, i prefer CSS method.
Example:
#import url(http://fonts.googleapis.com/css?family=Roboto);
Import this in CSS and use this for you text: font-family: 'Roboto', sans-serif;
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.