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
Related
I have a slight issue with my CSS file. I am importing a Google font at the top of my CSS, but the font name begins with "Black". So when I go to use the font in font-family, the CSS identify's it as a color and not the font.
Is there a way to correct this?
CSS File:
#import url('https://fonts.googleapis.com/css?family=Black+Han+Sans');
.home-header h1{
font-family: Black Hans Sans;
}
You had a typo in your font-family, it's Black Han Sans, not Hans.
#import url('https://fonts.googleapis.com/css?family=Black+Han+Sans');
.home-header h1 {
font-family: Black Han Sans;
}
<div class="home-header">
<h1>Black Han Sans</h1>
</div>
Otherwise, you can also wrap the family name in quotation marks.
And this is also good practice according to MDN:
It is a good practice to quote font family names that contain white space, digits, or punctuation characters other than hyphens.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#valid_family_names
#import url('https://fonts.googleapis.com/css?family=Black+Han+Sans');
.home-header h1 {
font-family: "Black Han Sans";
}
<div class="home-header">
<h1>Black Han Sans</h1>
</div>
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.
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.
I am trying to use a custom font in a webpage. I however know next to nothing about HTML5 and CSS. I want 1 h1 tag to have a custom font. I have the .ttf file in the same folder as the webpage. I tried this with no success:
<h1 style="text-align: center"; font-family="MinecrafterReg.ttf">Welcome to Ben's Minecraft</h1>
Could anyone else help me?
Stick this in the style tags:
#font-face {
font-family: MinecrafterReg;
src: url(MinecrafterReg.ttf);
font-weight:400;
Then stick this in the h1 tag:
<h1 style="text-align: center; font-family: MinecrafterReg">Welcome to Ben's Minecraft</h1>
Nowadays you can place an #import at the top of your style block:
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
This is not how you should use a custom font on a website. First, you should use an external style sheet and have all your CSS in that. Using inline styles is not a great practice. Second, I do not think you can link to a .ttf file as you want. Notice also that your code had wrong inline format. font-family: not =. Also, the whole inline style needs to be in quotes. style="text-align: center; font-family: 'Sigmar One', cursive;"
That being said - you could link your font in your 'head' of your document and then use inline styles to style h1. Here is a way to do it with a google font. Hope this helps!
<head>
<link href='https://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>
</head>
<h1 style="text-align: center; font-family: 'Sigmar One', cursive;">Welcome to Ben's Minecraft</h1>
font-family:url('https://s3-xxxxxxxxxxxxxx/fonts/FloydsnirLTStd-Rmands.otf'); in Inline style css
I am practically wetting myself at the prospect of getting this working!
I have set the location of the .ttf file - but it doesn't seem to pick it up.
Am I setting the location up wrong?
Am I describing the font incorrectly?
<!DOCTYPE html>
<html>
<body>
<style>
#font-face
{
font-family: Baskerville;
src: local('J:\Internet\Paul\Baskerville test\IT597___.ttf');
}
p { font-family: baskerville, serif; }
</style>
<h1 class="baskerville">This is written in ITC Baskerville</h1>
<p>Please note, that this is not written in Baskerville, but the word <span class="baskerville">Waterman</span> here is.</p>
<p>Read this for the W3C specifications on the "#font face" declaration which I've used to do this.</p>
</body>
</html>
http://www.fontsquirrel.com/tools/webfont-generator use this generator to generate your font face. it will also provide the right css for the font.
one of the mistakes I see in your code is that your font-family is defined as Baskerville and p has font-familly baskerville (capitalize this)