I am trying to use Nastaliq Unicode NFL and the Jameel Noori Nastaleeq fonts for displaying text in Urdu in the browsers. But it isn't displaying properly in any of the browsers.
Please suggest a mechanism through which I can display the text in the same format as is displayed in the below site:
http://www.urdupoint.com/
Thanks,
Waq
here is the code for that font-family:
http://cdn.urdupoint.com/daily/font-styles/nafees_web_naskhshipped.eot
Now, you can use: #font-face to apply this to use own website.
You should have seen this code in the website's HTML Inspector. It was just there at the end of the code.
For #font-face: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
From Notepad++ you can simply write Urdu just like English
<span style="font-size:13px;padding-left:53px; font-family:Nafees Nastaleeq;"><i> براے مہربانی اپنی باری کا انتظار کریں </i></span>
To add other font family,
See this link
http://font.urduweb.org/
Add Jameel Nooriee Css Font Family in css. Then Try it
.urduh {
font-family: Jameel Noori Nastaleeq;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p class="urduh" >زندگی میں بہت سی پریشانیان آ سکتی ہیں</p>
</body>
</html>
Related
I'm using a CMS and therefore can only amend the CSS file. I have the following code in that file:
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
.h1_section_hero {
Font-family: 'Montserrat';
}
</style>
However it's not changing in the browser. I'm assuming that I don't have to download the font as i'm importing it within the file? thanks
It looks like your google font link is invalid, you are missing a ? between css2 and the family key:
'https://fonts.googleapis.com/css2?family=Montserrat&display=swap'
If you were to open both urls into your browser you will see that your original url is broken, and that the correct one above shows the fonts.
Create a separate link to the stylesheet rather than trying to import. The markup below is taken from the Google Fonts API doc and works just fine in my browser:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
I have a website which serves the Burmese people in burmese language. Problem is in Myanmar country Unicode format is not used instead they use Zawgyi format of encoding. The content on my website appears broken. How do I fix this issue.
This error is occuring in Iphones only
You can use font link and embed with font-family.All fonts correctly appear in any device or browser no need to put or install specific fonts in it's device.If you want to check another Myanmar fonts link.You can go there https://mmwebfonts.comquas.com/#how-to-use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href='https://mmwebfonts.comquas.com/fonts/?font=myanmar3' />
<link rel="stylesheet" href='https://mmwebfonts.comquas.com/fonts/?font=zawgyi' />
<style type="text/css">
.zawgyi{
font-family:Zawgyi-One;
}
.unicode{
font-family:Myanmar3,Yunghkio,'Masterpiece Uni Sans';
}
</style>
</head>
<body>
<h3>This is for ZawGyI font</h3>
<p class="zawgyi">
သည္စာသည္ ေဇာ္ဂ်ီ ျဖင့္ေရးေသာစာျဖစ္သည္
</p>
<h3>This is for unicode (myanmar3) font</h3>
<p class="unicode">
သည်စာသည် unicode ဖြင့်ရေးသောစာဖြစ်သည်
</p>
</body>
</html>
knayi is a good library to convert or detect (Unicode & Zawgyi) fonts.
You can load the script via CDN or NPM and use kanayi.fontConvert();
// Expected paramaters
kanayi.fontConvert(content, targetFontType , orignalFontType)
Example
knayi.fontConvert('မဂၤလာပါ', 'unicode', 'zawgyi') // မင်္ဂလာပါ
knayi.fontConvert('မဂၤလာပါ', 'unicode') // မင်္ဂလာပါ
Btw, I made a wordpress widget with kanayi.
https://github.com/ronaldaug/auto-font
Please add 2 or three extra fonts for font fall back
.zawgyi{
font-family:Zawgyi-One,second font,third font;
}
Like this if font is not supported the second one will work if not then third on different platform.
Thankyou for your precious time;
i'm a beginner in web development and as i was trying my hands on html and css
i found that the css styling isn't getting applied to the html and that the chrome
developer tools shows it to be empty (the file is present but the code that i've written in css file seems to be absent)
please help!
index.html file
<!DOCTYPE html>
<html>
<head>
<title>MY WEB PAGE </title>
<link type="text/css" href="style.css" rel="stylesheet" >
</head>
<body>
<h1>THIS IS MY WEB PAGE </h1>
<p>
css applied to this part of the code isnt being shown in the developers
tools
</p>
</body>
</html>
style.css file
body{
background-color:black;;
}
h1{
color:white;
font-style: italic;
font-family: sans-serif;
}
p{
font-family: serif;
color:yellow;
font-style: oblique;
}
You may be missing an angle bracket on your first line or it could be a copy-paste error. It should be: <!DOCTYPE html>
Also look in the Network tab in Chrome toolbar to make sure that it's able to find your style.css and it contains the right CSS.
Depending on how it's being hosted, you may have to hit Ctrl-F5 to tell the browser to download everything fresh instead of caching.
Clear the browser cache. It happens sometimes.
https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop
you have to save css and html file in a same folder as your writed
i have problem with font-weight, for "EN" languages it is working fine, but when I do the same thing with with my lang (SK) some characters have different font weight. Font is 'Open Sans'. When I try these chars in font.google viewer there is no problem. Actual font-weight is 300, on 400 there is no problem but I want it to be thin. The problem occurs on some Chrome(Mobile),Edge, IE. Any ideas?
Open Sans on fonts.google
Open Sans on my website
link to page: thomaskovo.github.io/hotel-it/IT_Bussiness_Solutions/hosted_exchange_office_365.html
body{
font-family: 'Open Sans', sans-serif;
font-weight:300;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
This is a testing text.
Mačka žena ťava šošovica
<hr>
Open this in Edge or IE
</body>
</html>
The font used doesn't contain all glyphs. Due to font fallback, the missing glyphs fall back to some other font.
You only load the Latin glyphs. You also need to load subsets that contain the needed glyphs:
<link href="https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext" rel="stylesheet">
Note: subset=latin-ext.
I took this snippet form fonts.google.com on the embed AND customize tabs (bottom right).
Interestingly I came across a web page where it has image ,but when I am able to see the source code I cant see its source, I mean the link to the actual image. since I am developing a webpage (beginner), I would like to know how to achieve. I am not sure whether its an image, or it is coming through CSS.
and the site below
https://www.debuggex.com/pricing
It's not an image but a character specified using CSS:
content: "\f023";
This is achieved using FontAwesome. You can apply classes to elements (in this case, icon-lock) and the styles are automatically applied using this third party open source thingy.
Because this is iconic font design it does not have image
If you like to include your project add css
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Then use class like this
<i class="fa fa-book fa-fw"></i> Library</li>
Refer
http://fortawesome.github.io/Font-Awesome/icons/
http://fortawesome.github.io/Font-Awesome/examples/
In this example it is not an image. The padlock is a font and circle around a style (CSS).
<span class="callout-pic"> <!-- Circle -->
<i class="icon-lock"></i> <!-- Padlock icon -->
</span>
generating image using the base64 encoding,
background: url(data:image/png;base64,.....)
Ref: http://base64img.com/#encode
#GrantThomas is right, Content use in css but basic use call to systems Symbol example Copyright Symbol, Percent Symbol, Left Right Arrow and more work etc. If you want to use this then you do not need any external resource in your page. Simply in your page call font which available in your system and right some code and if you want to some specific symbol then download font.
Example downloaded font :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<title>DingbatsOne Regular Specimen</title>
<style type="text/css">
#font-face {
font-family: 'dingbatsoneregular';
src: url('dingbat1-webfont.eot');
src: url('dingbat1-webfont.eot?#iefix') format('embedded-opentype'),
url('dingbat1-webfont.woff') format('woff'),
url('dingbat1-webfont.ttf') format('truetype'),
url('dingbat1-webfont.svg#dingbatsoneregular') format('svg');
font-weight: normal;
font-style: normal;
}
#target {font-family: 'dingbatsoneregular';}
#target:before {content: "A"; font-size: 200px;}
</style>
</head>
<body>
<div id="target"></div>
</body>
</html>
I am new in CSS and beginner but may be this is helpful to you.