I am developing a exam software where I need some help in fonts implementation. I provide user an option to add Hindi font content i.e. Kurtidev 10 and apply CSS to that div:
<style type="text/css">
#font-face
{
font-family: "My Custom Font";
src: url('font/Kruti_Dev_010.ttf') format("truetype");
}
.customClass
{
font-family: "My Custom Font" !important;
font-size: 18px !important;
}
but if user add any of the english font in that text then it convert that Hindi text into the Kurtidev 10 too.
I need help that how can I set that only Hindi font take that CSS, if any other font it found then it will not be converted.
Related
Pretty basic question here, I want to use a font that is saved in my browser and don't have link for it
How to check the css rule for the font.
How to use it in my website.
You would most likely have to use #font-face and download your font as a .ttf or .woff2 file.
Kind of like this: src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")
To apply the #font-face to an element, give the element a font-family property and set it to whatever you named it in the #font-face rule.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff); /* change this to your font */
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
</body>
</html>
Source: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Additional Reference: developer.mozilla.org/en-US/docs/Web/CSS/#font-face
Hope this helped.
I'm using a custom font for Shopify which I've added to my css file. I used another font on this site as well and every place that I've inserted this font has worked just fine on desktop and mobile. The only place I want to use this second font (Arial Black) is in the section header.
I inserted this in my CSS but it doesn't appear on mobile, only on desktop:
#font-face {
font-family: 'Arial Black', sans-serif;
src: url({{'Arial_Black.ttf'| asset_url }});
url({{'Arial-Black.woff'| asset_url }});
url({{'Arial-Black.woff2'| asset_url }});
url({{'Arial_Black.otf'| asset_url }});
font-weight: normal;
.section-header h2 {
font-family: "Arial Black", sans-serif !important;
font-weight: 900 !important;
font-size: 30px ;
}
Any idea on how I can make this font work for just this one section of my site for mobile?
Is that path for the font right? I would try using an absolute path just in case. If you aren't sure of the path check another pages' sources tab in the developer tools (one where it is working) and you'll find the path.
Edit:
Just checked, when in mobile there's a style rule that sets the headers to
.h1, .h2, h1, h2 {
margin: 0 0 17.5px;
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
line-height: 1.2;
overflow-wrap: break-word;
word-wrap: break-word;
}
you need to add the following to your css to override this (I'm applying it only to h2 but if you want you can add h1):
h2, .h2 {
font-family: 'Arial Black', Gadget, sans-serif !important;
}
This should fix it
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.
In Arabic World We Use Some English Words In Article , But The Problem is, When I Use Arabic Font the English Word's be ugly ، and when use English Font Arabic Word's Be ugly . What is the solution? - Sorry For The Language It's Too Weak.
#import css font-family
You can use the #import rule to import an Arabic font.
#import allows you to import a style sheet into another style sheet. The #import must be at the top of the document (CSS), and #import statements must be declared outside any selectors.
This is my solution to your problem:
#import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
p {
display: inline;
}
.arabic {
font-family: 'Amiri', serif;
}
}
.english {
font-family: Arial;
}
<div>
<p class="arabic"> مرحبا بالعالم</p>
<p class="english">Hello world</p>
</div>
More arabic fonts can be found at Google Fonts homepage
I'm new to the CSS world, and i'm practicing on codepen.io
I'd like to add a certain font to my Pen. I downloaded it from a webSite, then tried to upload it on github and use the link to that file, but it doesn't work >,<
you can find the code here: http://codepen.io/Koop4/pen/mVaOLG
or read the following:
<body>
<h1>Hello World</h1>
</div>
</body>
html,
body {
height: 100%;
background-image: linear-gradient(to bottom, #0B88FF, #95EEFF);
}
#font-face {
font-family: 'superMario';
src: url('https://github.com/koop4/FreeCodeCamp/blob/master/portfolio/font/prstart.ttf');
}
h1,
h2,
h3 {
font-family: 'superMario'
}
thx in advance!
Because the URL of the .ttf file is a page not a file path. You must use the direct link of the font file. Use this:
#font-face {
font-family: 'superMario';
src: url('https://raw.githubusercontent.com/koop4/FreeCodeCamp/master/portfolio/font/prstart.ttf');
}
If doesn't work you must upload the font file in other hosts then use it.