I am a beginner coder and i have a small problem.I set the font types of my paragraph and heading in my HTML document to Arial using CSS. the code is as follows
h4{
font-family
arial san-serif;
}
The problem is that when I run the code the font doesn't change.
firstly I would like to know why this is. Could it possibly mean that I don't have the font on my computer. If so how do I correct this. Any help would be much appreciated.
P.S. It might be worth it to know that I am running notepad ++
font-family:
you forgot ":"
h4{
font-family: arial, san-serif;
}
You need to add a colon : and a comma ,.
h4{
font-family: arial, san-serif;
}
Also keep in mind that if you are using fonts with spaces, quote them.
h4 {
font-family: "Times New Roman", Georgia, Serif;
}
W3 Schools has a good explanation if you want to read more about it.
Related
I need to includes the font-faces directly in the DOM, what I'm trying to say is I need to put the font-faces in a tag. I could did it, but now, the fonts looks different
PD: ONLY HAPPENS WITH OPEN SANS FONT
I tried to put different css properties, like font-smoothing
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering: optimizeLegibility;
Update: Well, I found the problem, but not the solution, it's a weird issue. By downloading the "OpenSans-Regular" you can notice it's not only regular, if you put the
font-weight: bold;
You will able to see a bold weight, but not really the original "OpenSans-Bold", if you download the "OpenSans-Bold" you can see a difference bewtween put
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
font-family: 'Open Sans'; // Actually this is the open sans regular
font-weight: bold;
Results:
AND
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
font-family: 'Open Sans'; // And this is the original open sans bold
font-weight: bold;
Results:
The second result is bolder than regular (obviously) with font weight 700
Does anyone know what this behavior is due to? I need to use the bold of the Regular and the original bold of "OpenSans-Bold" (both of them in the same website). Thanks in advance.
(Friendly reminder! I'm not using google fonts API, just for example purpose -but I downloaded manually OpenSans from it-)
I'm trying to get something like this to work:
body {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Helvetica, inherit;
}
Basically if "Helvetica" is not available on the client's browser, I want the font-family to be inherited from a parent. But it seems to me that I can't use "inherit" in a font priority list.
How can I achieve something like this without having to copy paste font-family from body?
You are correct. You can use it just like you did. This is something that became available with CSS2. This question is similar and has some answers worthy of a read.
I think the real problem is that Helvetica isn't a free font. So, it just isn't available for widespread use.
Option 1) If you own the Helvetica font, make an image using that font
(for the few lines that you want that specific look for).
Option 2) (as #bjupreti suggested) is to use a substitute font that is widely
available.
Font family will automatically be inherited from the parent property. So, all you have to do is:
body {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Helvetica;
}
This will automatically inherit the font family of body if there is no Helvetica in end users computer.
I'm trying to use fontlibrary.org to load fonts to produce documents as PDF. I currently use these same fonts on web sites and everything works as expected; however, when I try to print a document with these fonts, strong does not render bold and em does not render as italic. To work around this problem, I have to do this (this is already sass, so you can imagine the corresponding CSS):
body {
font-family: "HkGroteskRegular", sans-serif;
strong {
font-family: "HankenGroteskBold", sans-serif;
font-weight: bold;
}
em {
font-family: "HankenGroteskItalic", sans-serif;
font-style: italic;
}
}
h1, h2, h3, h4, h5, h6 {
font-family: "NormungRegular", serif;
strong {
font-family: "NormungBold", serif;
font-weight: bold;
}
em {
font-family: "NormungItalic", serif;
font-style: italic;
}
}
code, pre {
font-family: 'FantasqueSansMonoRegular', monospace;
strong {
font-family: "FantasqueSansMonoBold", monospace;
font-weight: bold;
}
em {
font-family: "FantasqueSansMonoItalic", monospace;
font-style: italic;
}
}
So that leaves me with a few questions:
How does this work at all on the web? How does the browser load the bold font for bold, the italic font for italics, and so on? Evidently, the browser simulates font variants for bold and italic, so it doesn't use the imported font variants.
Since this doesn't work for print, who's broken? Does fontlibrary.org serve the fonts incorrectly and the browser (and wkhtmltopdf) can't find them? Do both the browser and wkhtmltopdf load the font files incorrectly?
If fontlibrary.org is broken Since fontlibrary.org seems to use a font variant naming scheme that doesn't match what the rest of the world seems to except, then whom can I trust to serve these #font-face rules correctly? Do I have to write them myself to be sure?
Is there anything I can do to make this work better?
UPDATE: 2018-10-14. I have noticed that when I download the fonts so that they can be found locally, everything works. I suspect that this happens because the locally-installed font names follow a naming convention for the font variants that allows the browser, Print Preview, and pandoc to find them. I would really appreciate it if a few people would confirm that the naming convention solves the problem. In that case, I could tweak the #font-face rules to load the fonts from fontlibrary.org so that I don't need to install the fonts locally.
I believe that this is a result of how Fontlibrary shares their fonts. If you look at the file https://fontlibrary.org/face/hk-grotesk (which is the link containing the font face css) at the very bottom you will see a section marked "The following rules are deprecated."
If you use the font names from that section (i.e. "Hanken Grotesk") and not the special names (like "HankenGroteskBold"), then web browsers seem to find the correct bold & italic forms. It's only using these special names that I find trouble (in my case with the Libertinus fonts).
Unfortunately, as these names are marked "deprecated", I don't know how long they will stay working. Nor, do I know why Fontlibrary setup this naming convention, which makes it more difficult to use the fonts than is necessary (in my opinion).
So I've been trying to import Google's fonts and integrate them into a website without success.
The CSS:
#import url(http://fonts.googleapis.com/css?family=Linden+Hill);
/*...*/
body.single-post p, body.page p{
font-family: 'Linden Hill', sans-serif;
}
For some reason, when I try to use the font, in both Firefox and Google Chrome, it doesn't load/show the font, with or without quotation marks wrapped around the font name.
Google Fonts's website says that to include the font, you do this:
font-family: 'Linden Hill', serif;
...but it doesn't work.
Now, for a different font, Tangerine (note that it's one word), it works if I include it without quotation marks, like so
#import url(http://fonts.googleapis.com/css?family=Tangerine);
/*...*/
body.single-post p, body.page p{
font-family: Tangerine, sans-serif;
}
...but if you do what Google Fonts tells you, and wrap it in single quotes, it magically stops working.
This is what it looks like in the inspector:
Am I doing something wrong?
It turns out that I had the #import after a #font-face definition.
/*some other #imports*/
#font-face {/*font face here*/}
#import url(/*the font URL here*/)
Moving it before the #font-face definition fixes the issue.
That should work with double quote:
font-family: "Linden Hill", serif;
yes you are doing wrong in css here (body.single-post p, body.page p),
see here if you are using directly like this.
body{
font-family: 'Linden Hill', sans-serif ;
}
you need to write css tree
try this may it work
body .single-post p, body .page p{
font-family: 'Linden Hill', sans-serif;
}
or if you can, show me the the code where you want to use it
its working fine the quotation make is not problem
As far as I know, one needs to use double or single quotes for fonts if they contain spaces, like:
font-family: "Times New Roman", Times;
font-family: 'Times New Roman', Times;
But on Google Fonts (http://www.google.com/webfont), I also see
font-family: 'Margarine', cursive;
Some even use it like so:
font-family: 'Margarine', 'Helvetica', arial;
I find this weird, as the following works as well:
font-family: Arial, Helvetica, sans-serif;
font-family: Cambria, serif;
So what is the correct usage of quotes around font names in CSS?
You can always put a specific font family name in quotes, double or single, so Arial, "Arial", and 'Arial' are equivalent. Only the CSS-defined generic font family names like sans-serif must be written without quotes.
Contrary to popular belief, a font name consisting of space-separated names such as Times New Roman need not be quoted. However, the spec recommends “to quote font family names that contain white space, digits, or punctuation characters other than hyphens”
When to quote font-family:
Optional
font-family: Times New Roman; /* These are equivalent */
font-family: 'Times New Roman';
font-family: "Times New Roman";
font-family: Unique Ode™ 😊 Épopée; /* These are equivalent */
font-family: "Unique Ode™ 😊 Épopée";
font-family: "Answer #42" /* These are equivalent */
font-family: "Answer \23 42";
font-family: Answer \23 42;
As long as a font name contains only:
a-z letters (case ignored)
0-9 digits
- dash
_ underscore
non-ASCII Unicode
single inner spaces
backslash hexadecimal character codes
then quotes are optional. Single or double quotes. Case ignored. There are some weird edge cases: unquoted words must not start with a digit, dash-dash, or dash-digit.
Must
font-family: "Intro Rust 2" /* Unquoted words must not start with numbers. */
font-family: "Serif"; /* For your own Serif, not the generic serif. */
font-family: "Yin/Yang"; /* Quote or code most ASCII punctuation. */
Should
font-family: "Initial Seals JNL" /* `initial` and `default` are reserved words. */
font-family: "Omar Serif" /* Generic names might also be reserved words? */
Must Not
font-family: monospace; /* Generic fonts must NOT be quoted. */
font-family: serif;
font-family: sans-serif;
font-family: cursive;
font-family: fantasy;
Thanks:
Article on font names by Mathias Bynens, linked by Stephan B's comment.
bizworld's point about conflict with generic fonts.
Mozilla's description of Custom Identifiers.
W3C spec for font-family and identifiers, linked by Jukka K. Korpela's answer
I've just learned myself that the quotes aren't ever necessary but rather recommended. We all learn something new every day.
The other place you see them is in css properties that require a url
background:url('hithere.jpg');
background:url(hithere.jpg);
Both those statements are going to work exactly the same. Same goes for the fonts, which type of quote you use is irrelevant in this case, just be consistent in how YOU do things and that is all that really matters.
For two reasons;
When an actual font-family name shares the same name as a generic family name, to avoid confusion with keywords with the same names e.g.
p {font-family: 'Shift', sans-serif;}
When there are more than one word in a font-family name e.g.
p {font-family: 'Times New Roman', ..... , a generic family name here ;}
You have to use quotes when there is a space in the font name. If there is no space in the font name, it's best practice to leave them off, although it won't hurt anything but your file size to have them still.
Examples:
font-family: "Times New Roman", Times; // ok, and best practice
font-family: Times New Roman, Times; // incorrect, Browser won't be able to find Times New Roman
font-family: "Times New Roman", "Times"; // ok, but has extraneous quotes around Times