After applying the below codes, the font awesome icons show up as squares. If I apply it to body tag. It doens't overwrite all font-family, so I had to apply it to *. How can I fix this error?
<style>
* {
font-family: "Open Sans", sans-serif !important;
}
</style>
This is because font awesome requires the FontAwesome font-family to be applied to icon elements, in order to source and render the icons correctly.
Your styles are likely overwriting this FontAwesome behaviour.
One way to fix this would be to ensure font awesome's .fas class still correctly applies the required FontAwesome font to .fas elements. You could do this by updating your CSS:
<style>
* {
font-family: "Open Sans", sans-serif;
}
.fas {
font-family:FontAwesome;
}
</style>
Or, if your browser supports the :not CSS3 selector:
<style>
*:not(.fas) {
font-family: "Open Sans", sans-serif;
}
</style>
If you are using Font Awesome 5 You can use this
.fab
{
font-family: 'Font Awesome 5 Brands' !important;
}
.fas, .far, .fa
{
font-family: 'Font Awesome 5 Free' !important;
}
Related
I downloaded a few fonts from google font and there are some font files for bold, italic, light, thin etc. Let's take Robot as an example, these are two font files I downloaded: Roboto-Bold.ttf, Roboto-Regular.ttf.
I wonder how should I use the file with Bold? What is the difference if I pick the regular font file with below code:
canvasContext.font = `bold 20px Robot`
The above code defines the bold for the Robot font family. Do I need to import Roboto-Bold.ttf file for the bold in this case? The same question for italic, light, thin etc.
You will need to define your font in css using #font-face with all the weights. Define same font-name for all the styles, just differentiate them with font-weight like below
#font-face {
font-family: "Roboto";
src: url("Roboto-Regular.ttf");
font-weight: normal;
}
#font-face {
font-family: "Roboto";
src: url("Roboto-Bold.ttf");
font-weight: bold;
}
#font-face {
font-family: "Roboto";
src: url("Roboto-light.ttf");
font-weight: 300;
}
#font-face {
font-family: "Roboto";
src: url("Roboto-thin.ttf");
font-weight: 100;
}
and then use it in your elements like
element {
font-family: Roboto;
font-weight:100; /* for Thin */
font-weight:300; /* for Light */
font-weight:normal; /* for Regular */
font-weight:bold; /* for Bold */
}
Or you can use html <link> to embed your font like
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500" rel="stylesheet">
If you want to use google font just go to fonts.google.com & select font then customize it
After finishing your customization go to "EMBED"
Copy the link & paste it into your html head section.
Copy the font family name & paste into your css file selector like below.
canvas {
font-family: 'Roboto', sans-serif;
font-weight: thin/normal/bold/bolder; // Choose any option
font-style: normal/italic/oblique; // Choose any option
font-size: 20px;
}
you must link file font to your project
<style>
#font-face {
font-family: 'Athiti';
font-style: normal;
font-weight: 400;
src: local('Athiti'), local('Athiti-Regular'), url('fonts/Athiti-Regular.ttf') format("truetype");
}
</style>
When you call font name
<div class="container" style="font-family: 'Athiti' font-size: 16px; ">
<b> Font Bold </b>
</dib>
You need to define Bold font
#font-face {
font-family: 'RobotoBold';
src: url('./Roboto-Bold.ttf');
}
And use canvasContext.font = 20px RobotoBold
You need to import one by one.
Yes you will have to import each tff file , however the regular version still can be made bold etc in some/most family fonts , for example you will have the normal bold weight 400 , but if you want to get other bold variations e.g 500 600 700 you will need to import the bold variation of the font
In font awesome 4 you could easily apply an icon to a :before/:after element using CSS.
Is the same possible with the new font awesome 5 JS/SVG implementation? As from what i can see this requires the relevant tag to exist in html which isn't always practical e.g. you have a CMS and want to apply an icon to all user created content <li> elements
I know in FA5 you can still use the old css/webfonts but it would be nice if the same functionality was available in the recommended method of using JS
Specifying the proper font-weight seems key to have some of the symbols displayed properly (and not "□□□" instead).
font-weight has to be:
400 for Regular and Brands symbols
900 for Solid symbols
300 for Light symbols
I.e. if you use Font-Awesome with CSS + Webfonts, a CSS-only solution is:
#import url("font-awesome/css/fontawesome-all.min.css"); /* FA CSS import */
/* ... */
.class:before {
/* >> Symbol you want to use: */
content: "\f16c";
/* >> Name of the FA free font (mandatory), e.g.:
- 'Font Awesome 5 Free' for Regular and Solid symbols;
- 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
- 'Font Awesome 5 Brand' for Brands symbols. */
font-family: 'Font Awesome 5 Free';
/* >> Weight of the font (mandatory):
- 400 for Regular and Brands symbols;
- 900 for Solid symbols;
- 300 for Light symbols. */
font-weight: 900;
/* >> Optional styling: */
display: inline-block;
/* ... */
}
You need to enable it (it's disabled by default).
<script>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
</script>
Css:
.class:before{
display: none;
content: "\f16c";
font-family: "Font Awesome 5 Brands";
}
Other types:
Font Awesome 5 + Solid or Regular or Light or Brands
I think its working fine just like this:
.class:before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
I got 5 to work using
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
in <head> and
:before {
font-family: "Font Awesome 5 Brands";
font-weight: 400;
content: "\f167";
}
in my css
Font Awesome 5, all top answers not working in my case as I am using the free version.
The correct answer for this is in this question.
check your font type (free or pro) then follow:
Free
font-family: "Font Awesome 5 Free"
Pro
font-family: "Font Awesome 5 Pro"
Brands
font-family: "Font Awesome 5 Brands"
Don't forget that I just used the link tag with path to my CSS file in HTML.
No enabling required also didn't import the all.css file to my css file. Now it is working!
Use this Link ->: https://use.fontawesome.com/releases/v5.5.0/css/all.css
CSS
ul li{
list-style-type: none;
position: relative;
}
ul li:before{
position: absolute;
color:#ff0000;
top:0;
left:-30px;
font-family: 'Font Awesome 5 Free';
font-size:1.2em;
content: "\f105";
font-weight: 900; /* <-- add this or 400 for other styles */
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
My problem disappear when i set this value: font-weight: 900;
Should you be using Fort Awesome to serve your icons then you need to add font-family: <my-kit-name>, no need to use font-weight: 400/900.
For more info see this link:
https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a
#font-face
font-family: MyFont
src: url(https://.../font_name.ttf?raw=true)
$font-main: 'MyFont' , sans-serif
.some_class
font-family: $font-main
When I use MyFont coming from web there is no effect. How to do this properly?
You don't need to add a .ttf, simply include the font #import url at the top in your main .scss file:
#import url('https://fonts.googleapis.com/css?family=Overpass');
Then to use it:
//store it in variable first
$font-main: 'Overpass', sans-serif;
//to use it
.selector {
font-family: $font-main;
}
This would be best for browser compatibility.
If for whatever reason you still want to load a .ttf file, in your sass file at the top set it's name and path:
#font-face {
font-family: 'myFont';
src: url("fonts/myFont.ttf") format("truetype");
}
then use it:
$font-main: 'myFont', sans-serif;
.selector {
font-family: $font-main;
}
Demo Snippet 1 - loading font via conventional CSS:
#import url('https://fonts.googleapis.com/css?family=Overpass');
#import url('https://fonts.googleapis.com/css?family=Overpass');
div {
font-family: 'Overpass', sans-serif;
}
span {
font-family: sans-serif;
}
<div>Overpass font loaded</div>
<span>regular sans-serif</span>
Demo Snippet 2 - loading font via HTML in-between your <head></head> tags:
<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">
div {
font-family: 'Overpass', sans-serif;
}
span {
font-family: sans-serif;
}
<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">
<div>Overpass font loaded</div>
<span>regular sans-serif</span>
Demonstration font was taken from here
i've downloaded a custom font in ttf format, i want to override my bootstrap font for a header text.
I've added it in my CSS.
#font-face {
font-family: 'BrauerNeue';
src: url(brauerneue.ttf);
}
h1 {
font-family: 'BrauerNeue';
}
Then added a h1 in my page:
<h1>Text</h1>
It still displays in the bootstrap font.
What am i doing wrong?
Check the URL. If all is correct, then:
h1 {
font-family: "BrauerNeue" !important;
}
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;