Please go here end see Black font style. How do I get this style on my page. Here is what I've tried so far, but it's not working.
.title{
font-family:'montserrat' sans-serif;
font-weight:900;
font-weight:Black;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class='title'>LOREM</div>
First, the font-family property requires values to be separated by a comma. Also, you should use the capital letter in the value.
Therefore, this…
font-family: 'montserrat' sans-serif;
…should be
font-family: 'Montserrat', sans-serif;
To add more weights to your font, use the customize menu:
Then, simply add the corresponding font-weight or font-style value:
font-weight: 900;
If you don't have that weight specified in your generated <link>, then the fallback family and weight will be used.
There are several variants based on which you can import the fonts. For Montserrat, there are Regular 400, Bold 700, Black 900 and many more. Just select the variant type and add that font, now you are good to go.
Based on your question the URL you need is
<link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet">
First use 'Montserrat', sans-serif; (with ,)
Second font-weight:black; is invalid so remove it...
You can use font-style:normal
.title{
font-family:'Montserrat', sans-serif;
font-weight:900;
font-style:normal;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet">
<div class='title'>black</div>
Related
I am trying to use FontAwesome in the content of CSS.
It appears with the code for the icon instead of the icon. I have followed the online helps but still not working
css
#font-face {
font-family: 'FontAwesome';
src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css');
}
.fp-prev:before {
color:#fff;
content: '/f35a';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
If you are using the JS+SVG version Read this: Font Awesome 5 shows empty square when using the JS+SVG version
First, you only need to include the CSS file of Font Awesome 5 either in the head tag using:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
Or within the CSS file:
#import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")
Then you need to correct the font-family and the content like below:
#import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.fp-prev:before {
color:#000;
content: '\f35a'; /* You should use \ and not /*/
font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
font-style: normal;
font-weight: normal;
font-size:40px;
}
<i class="fp-prev"></i>
In some cases, you have to also add
font-weight:900
More detail here: Font Awesome 5 on pseudo elements shows square instead of icon
As a side note: Font Awesome 5 provide 4 different font-family for each pack of icons:
Font Awesome 5 Free for the free icons.
Font Awesome 5 Brands for the brand icons like Facebook, Twitter, etc.
#import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.fp-prev:before {
color: #000;
content: "\f099";
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
<i class="fp-prev"></i>
Font Awesome 5 Pro for the Font Awesome Pro.
Font Awesome 5 Duotone also included in the Pro package.
Related: Font Awesome 5 Choosing the correct font-family in pseudo-elements
Make your font-weight: 900;. I see you miss it
This is not showing because of color -issue . Please follow step :-
Step- 1. Copy this style in your page
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
Step- 2. copy this code at the top of your all.css in your page .
#import url("https://use.fontawesome.com/releases/v5.14.0/css/all.css");
Step- 3. Use the font-family and the content and color like
.password_invalid:before {
color: #ff0000;
content: '\f058'; /* You should use \ and not /*/
font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
position: relative;
margin-left: -36px;
padding-right: 13px;
font-weight: 400;
}
This Happened to me too. I had used this icon: as was using font awesome 5 cdn.
But when I tried to select the same class and then edit the icon, the css editing didn't run on the icon.
So the removed the "fas" from ".fas fa-plus-square" on the css selector and made it ".fa-plus-square{}".
So the CSS was like this (for me) : .fa-plus-square{
float: right;
} where i removed the "fas". And it worked for me.
where the Html class was <i class="fas fa-plus-square"></i>
And the cdn that I used: "https://use.fontawesome.com/releases/v5.0.7/css/all.css".
Hope this helps you
When you want to include FontAwesome the url you provided should be inside thehead tag as a stylesheet file:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
Then you can use Font Awesome as you have done.
I know I'm really late to answer this.
You have to include Fontawesome CSS in the header.
CDN -
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
If you have downloaded the source files then include as follows
<link rel="stylesheet" href="path-to-your-font-awesome-folder/css/all.min.css" />
Later you have to add the CSS as follows -
.fp-prev:before {
color:#000;
content: '\f35a'; /* replace / with \ */
font-family: "Font Awesome 5 Free"; /* here is the correct font-family */
font-style: normal;
font-weight: 900;
text-decoration: inherit;
}
if you wish to add it via <i> tag then you can follow
<i class="fas fa-arrow-alt-circle-right"></i>
Make sure your font weight is 900.
Refer - https://github.com/FortAwesome/Font-Awesome/issues/11946
An issue was raised in GitHub for the same. They have suggested that for the solid font awesome icons the font-weight should be 900.
Hope this will help you all.
I have a conflict with font awesome when 2 different css versions are used. I am not trying to use 2 different version, but my plugin embeds one version and sometimes a wordpress website has another version.
I am interested in this particular example, why doesnt first icon display if they both have same :before content?
(I have noticed it works if fa5 is linked first in the page)
What would be the easiest solution to handle this?
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"/>
<i class="fa fa-facebook"></i>
<i class="fab fa-facebook-f"></i>
https://jsfiddle.net/pfbx5865/1/
It's possible to have both libraries in parallel, just keep in mind: The style sheet loaded the latter "wins". It makes more sense to load FA5 first and then let FA4 overwrite the FA4 classes. Then most icons are displayed as expected.
The snippet below illustrates how to use both libraries. Whenever a FA4 class is used, it's rendered FA4 style. Whenever a FA5 class is used, it's rendered FA5 style. If you load it the other way around (FA4 first), everything is rendered FA5 style and that doesn't work if you have FA4 icon definitions that are now in the FA5 brand subset (fab).
If you swap the loading of the libraries (load FA5 first), it works.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label>Facebook à la 4.7</label>
<i class="fa fa-facebook"></i>
<br>
<label>Facebook à la 5</label>
<i class="fab fa-facebook"></i>
You can actually make them work together, however, you will have to edit the CSS for one of them and give every icon a new non-conflicting CSS name.
Step 1: Install both libraries locally.
Install each in separate directories and name one fa4 and one fa5 (or whatever you want to call the directories so you can tell them apart). You cannot use the CDN for this to work.
Step 2: Edit ONE version of Font Awesome
Pick which version of Font Awesome you want to edit. In my case, I was already using version 4, so I decided to edit version 5.
Change every instance of .fa to .fa5 in the CSS... EXCEPT for the font file names.
Example:
.fa-xs {
font-size: .75em; }
becomes
.fa5-xs {
font-size: .75em; }
Example 2:
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1; }
becomes
.fa5,
.fas,
.far,
.fal,
.fad,
.fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1; }
WARNING: DO NOT CHANGE REFERENCES TO THE FONT FILES!
Leave these unchanged, even though they have fa in the name.
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400; }
#font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../webfonts/fa-regular-400.eot");
src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
You have to reference the actual file name, and it does not matter what the name of the file is since they are in different directories.
Step 3: Add the CSS links to your head section
<head>
...
<link href="fa/css/font-awesome.css" rel="stylesheet"> <!-- load all FA4 styles -->
<link href="fa5/css/all.css" rel="stylesheet"> <!-- load all FA5 styles -->
...
</head>
Step 4: Call the Icons like Normal
One way of calling it looks like this:
<i class="fa fa-chart-bar-o"></i> <!-- Font Awesome 4 Version of Chart -->
<i class="fa5 fa5-chart-bar"></i> <!-- Font Awesome 5 Version of Chart -->
<i class="fab fa5-cc-discover"></i> <!-- Font Awesome 5 Brand Icon for Discover -->
Notice you have to use fab for the brand icons.
If you do it this way, you have no conflicts at all and can use the entire library for both sets.
Unfortunately I don't have good advice on how to make them work in parallel - it feels like a can of worms, I would try to avoid such situations. You are saying "my plugin" - does that mean you developed it? If I had control over the code and I knew it might be used in both environments, I would add a config-option to select FA4- or FA5-environment and would then create the appropriate tags.
WRT first icon not showing in your sample: you said that you noticed the reverse effect if you loaded scripts in reverse order. And there lies your answer already: both .css-files have different definitions for the .fa-class. I guess the one which ruins your sample is this (from https://use.fontawesome.com/releases/v5.0.8/css/all.css:
.fa,.far,.fas{
font-family: Font Awesome\ 5 Free;
}
as opposed to this (fromFA4):
.fa{
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Okay I struggled with this for some time and stumbled on this article, but the easiest solution is to just paste an SVG into the project like so: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tiktok" viewbox="0 0 16 16"> <path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"></path> </svg>
I placed it within my font awesome tags so it's styled similar
I know this is a short question, but how do you use multiple custom Google Fonts, i.e Baloo and Roboto, in the text?
In this example the text should be Roboto and headings should be Baloo.
Thanks for your time.
You click "select this font" for each font you want to use, and google will give you a single link tag with multiple fonts. You can also include multiple link tags for each font.
h1 {
font-family: Baloo;
}
h2 {
font-family: Roboto;
}
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
<h1>Baloo</h1>
<h2>Roboto</h2>
google fonts is now using css2 and the answers above are outdated.
the solution using css2 would be:
https://fonts.googleapis.com/css2?family=Baloo&family=Roboto
source: google fonts doc for css2
Go to https://fonts.google.com/
Search for say Roboto - https://fonts.google.com/specimen/Roboto
Hit "select this font" and you'll get a link to add to you html like this:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Note: You can also get one line with multiple fonts by piping the families.
Add this link(s) in your <head> tag
Use CSS to select the font with font-family.
See example below:
h1{
font-family: "Baloo"
}
p{
font-family: "Roboto"
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
</head>
<body>
<h1>Baloo</h1>
<p>Roboto</p>
</body>
Use as many as you want and import them as a stylesheet.
https://fonts.google.com/
For your example:
h1 { font-family: 'Baloo', cursive; }
p { font-family: 'Roboto', sans-serif; }
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h1>heading</h1>
<p>paragraph</p>
I have this problem:
body{
font-family: 'MyFontFace-font', 'Lucida Grande', Tahoma, Verdana, Arial, etc.
}
H1 {
font-family: 'MyFontFace-font2'
}
And my question is: If the second font ('MyFontFace-font2') is not loaded, will H1 have the font inherited from body, or from default of browser?
Thanks a lot.
The default fallback fonts of the browser will be applied, and any setting on body is ignored.
When you assign a value to a property of an element, like font-family to h1 here, then inheritance will never apply to that property on that element (except, trivially, if you assign the value inherit and the browser supports that). This is not changed by casual things like the value specifying a nonexistent font.
I also tested this with the following simpler document (on a system that has no font named MyFontFace-font2 but has a font named Tahoma):
<!doctype html>
<title>Test5</title>
<style>
body{
font-family: Tahoma;
}
H1 {
font-family: 'MyFontFace-font2'
}
</style>
<h1>Hello world</h1>
In Chrome, Firefox, IE the result is that the browser’s default font is used, not Tahoma. This is the expected result, by the specifications.
If the rule on H1 is omitted, then Tahoma is used, due to inheritance – then the h1 element will inherit the font-family property from its parent.
I have a page that is using a non-standard font and arial as a fail safe. Does anyone know if there is a way to set the font-size conditionally to the font?
<style type="text/css">
body {
font-family: Calibri, arial, sans-serif;
font-size: 1em, .9em, .9em;
/* Where 1em would be for Calibri and .9 would be for arial and sans-serif */
}
</style>
Good question but currently you can't do this until the 'font-size-adjust' property is more widely supported. It normalises fonts that have very different native sizes. This is the simplest definition and example I could find:
http://www.w3schools.com/CSS/pr_font_font-size-adjust.asp
I'd say there's no harm in using it even now and then it'll be ready when browser support improves.
The solution would be to use font-size-adjust. The problem is that it has poor support (IMHO).