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;
Related
I am currently trying to add a custom font to my website but it wont seem to work, I am not very good atm programming but my friend isn't home so I just wanted to get a solution for him. It currently works if using Calibri as font but any custom downloaded fonts dosent work. He is trying to use the HelveticaNeue font. The font is located in a folder called "fonts" in godaddy's server folder thing. Thanks! :) Here is the code:
#font-face {
font-family: "HelveticaNeue";
src: url("fonts/HelveticaNeue.otf);
}
h1{
font-family: Calibri;
letter-spacing: 6px;
}
p{
font-family: Calibri;
letter-spacing: 1px;
}
Add a simple font-face
#font-face {
font-family: 'Typogrotesk'; /*a name to be used later*/
src: url('TheURLToTheFontFile'); /*URL to font*/
}
then use it from css, html and javascript like this
This is for css
.example {
font-family: 'Typogrotesk';
}
The best way that i use for all my custom font is to generate the neccessary code for my font using this fontsquirrel
You need url that directed to the font, and helvetica neue is paid font. Use web safe font font-family: Helvetica, sans-serif; is easiest way to load helvetica
I've been trying to add a css font style like the one on the landing page of http://www.lecrae.com. The text that says "LECRAE", I'm trying to use the same css style, but it doesn't seem to be working for me, only "W" in the word "Welcome" shows, and it doesn't look like the font too. Here's my code below:
CSS
.header { font-family: Futura, "Trebuchet MS", Arial,sans-serif;
font-weight:700;
letter-spacing:14em;
line-height:1em;
color:#333;
font-style:normal;
font-size:120px;
}
HTML
<h1 class="header">Welcome</h1>
There are three issues here:
Only the first letter "W", of your heading "Welcome" is showing.
The font(s) you specified are not showing.
You want to use Futura, but it isn't available for free.
The first issue is solved easily. You are using a huge letter-spacing of 14em, I assume you made a typo when copying the given source and it was supposed to be .14em. This explains why you can only see the first letter: all other letters are being pushed out of the screen.
The second issue is also solved easily. You are specifying fonts that might not be available on a users computer. For example, most Linux distributions do not ship with any of the fonts you specified and would hence fall back to sans-serif. If you really want to use a specific font, #import that font from a source like Google Fonts. This way, the font will be downloaded by the user's browser.
The third issue is easy as well: you either pay for the font or you need to use a different, freely available font instead.
Putting that together:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
.header {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: .14em;
line-height: 1em;
color: #333;
font-style: normal;
font-size: 120px;
text-transform: uppercase;
}
<h1 class="header">Welcome</h1>
Also note that you did not copy the text-transform: uppercase rule, which I added here.
<head>
<title>Privacy Policy</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h2>Brief summary of our Privacy Policy</h2>
<div class="text">
<p>We value your privacy.</p>
<h3>General</h3>
CSS
body
{
background-color: black;
font-family: 'Roboto',sans-serif;
color: white;
}
h1 {
color: #fffffe;
font-size: 20pt;
letter-spacing: 0.2pt;
font-weight: 400;
}
h2 {
color: #fffffe;
font-size: 40pt;
text-align: center;
font-weight: 100;
}
1st part of the picture is what my result looks like.
2nd part is where I need to get.
3rd part is from google fonts.
You need to select the 100 font weight.
h2 {
color: #fffffe;
font-size: 40pt;
text-align: center;
font-weight: 100;
}
h1 {
color: #fffffe;
font-size: 20pt;
letter-spacing: 0.2pt;
font-weight: 400;
}
body {
background-color: black;
font-family: 'Roboto', sans-serif;
color: white;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
<h1>this is an h1</h1>
<h2>Brief summary of our Privacy Policy</h2>
By default Google Web Fonts only load the weight 400.
You need to specify in the URL the others weights you want by appending them after a colon.
So for your case the url should be :
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
Source : https://developers.google.com/fonts/docs/getting_started
Time to learn a thing about how fonts and CSS work together.
Single font files (so, on modern computers that's individual ttf and otf files, for the web that also includes woff and woff2 files) encode a single weight. A font like "Roboto-Regular" only contains one weight of glyphs, and so if CSS loads just that font, you can change font-weight as much as you want but it'll do nothing, because you haven't told the CSS engine what to do. It just keeps using the same font.
(2018 edit: OpenType now supports variable fonts, meaning that if the font has an fvar table it can be used to render a full spectrum of weights/variation for a typeface. Browser-support for this is still being figured out as of this edit, so that doesn't change the rest of the answer. Yet)
Instead, you need to tell the CSS engine that you need multiple, different, fonts for different weights. Google fonts does this for you if you request different weights (as noted in the other answers) but what really happens is that Google fonts generate CSS like this:
#font-face {
font-family: Roboto;
font-weight: normal;
font-style: normal;
src: url(roboto-regular.woff) format('WOFF')
}
#font-face {
font-family: Roboto;
font-weight: 300;
font-style: normal;
src: url(roboto-light.woff) format('WOFF')
}
#font-face {
font-family: Roboto;
font-weight: 200;
font-style: normal;
src: url(roboto-thin.woff) format('WOFF')
}
#font-face {
font-family: Roboto;
font-weight: 100;
font-style: normal;
src: url(roboto-ultra-thin.woff) format('WOFF')
}
etc.
And because of that, your browser's CSS engine now knows that why you say font-weight: 100, it needs to just that robot-ultra-thin font instead of the regular font.
"But why does this work for things like Times?"
Good question: because system fonts are already large collections of different font files. Note that when you're using CSS, you ask for a font-family. The "family" part is important: you are not asking for individual fonts, you're asking for an entire font family, and by default from that family you're asking for the style:normal, weight:normal version. Your OS is perfectly capable of finding the right single font file to hand to your browser's CSS engine for that purpose, and so when you as for font-family: Times your brower's actually loading Times-regular.ttf or something similar.
But if a font family doesn't have as many weighs as there are CSS weights, then no amount of saying "weight:100" is going to make a font-family without an ultra thin font look ultra thin. If the font resource doesn't exist (either because it literally doesn't exist, or because you forgot to teach CSS what font file you need loaded for a weight:100) the result is undefined, albeit predictable (the browser will end up using the closest matching font it does know about) and you should not be using CSS with undefined behaviour. You're on the hook to make sure it's defined =)
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.
I am using font "Signika" for my web app. The design is provided in Adobe Illustrator files where they have used the font "Signika Semibold".
First method:
I applied font-family: Signika Semibold but it works as semi-bold only on Chrome. Firefox and IE display the text in normal font weight.
JS Fiddle
HTML
<p class="semi">
Abcd Efgh
</p>
CSS
.semi{
font-family:'Signika Semibold';
font-size:14px;
}
Second method:
I applied font-family: Signika and gave font-weight: 500 for semibold. However it appears as bold instead of Semibold on Chrome.
JS Fiddle
HTML
<p class="weight">
Abcd Efgh
</p>
CSS
.weight{
font-family:'Signika';
font-weight:500;
font-size:14px;
}
Is there a workaround for fixing this issue?
Some screenshots would be awesome. Fonts do tend to appear heavier in Webkit browsers because they use sub-pixel antialiasing for font smoothing. Try setting -webkit-font-smoothing: antialiased; and it should start looking similar to how it looks in other browsers.
Have a look at this page for some more details.
There is a caveat to using this though: Generally, you should let the browser handle this. You'll notice that the MDN page mentions this is a non-standard feature.
If you're interested in how these different smoothing techniques produce different outputs, check this out.
SOLUTION
Used google fonts with required styles:Normal(400), semi-bold(600), bold(700))
Link of Google Font
Imported the font by including this code in HEAD section of HTML
<link href='https://fonts.googleapis.com/css?family=Signika:700,400,600' rel='stylesheet' type='text/css'>
Then in CSS,
For Normal
font-weight:400;
For Semi-bold
font-weight:600;
For Bold
font-weight:700;
By using this method, fonts on all browsers look alike.
Actually, your second JSFiddle had:
font-weight: 600;
Instead of 500.
Here's your fiddle updated.
http://jsfiddle.net/gbj7b1jp/1/
Now it's not bold.
Semibold usaly is font-weight:400;
However You scan specify Your font properties when importing fonts with #font-face:
#font-face {
font-family: Signika;
src: url(SignikaLight.otf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: Signika;
src: url(SignikaRegular.otf);
font-style: normal;
font-weight: 300;
}
#font-face {
font-family: Signika;
src: url(SignikaSemibold.otf);
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: Signika;
src: url(SignikaBold.otf);
font-style: normal;
font-weight: 600;
}
This is a known issue in CSS. Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work. You can have a look on this link(only runs in IE) and identify the best match of font style from the list is the easy hack to this problem.
http://www.cs.tut.fi/~jkorpela/listfonts.html