I just found out that there is no generator for Arabic fonts, because of the issue of connecting the letters... Does that mean that the only choice I have is to get it from fonts.com? Does anyone know of a place were I can get good quality arabic fonts to use for my website?
#ArbText01 {
position:absolute;
top:130px;
right:10px;
font-family:adobe arabic;
font-size:30px;
color:#fb5e08;
padding-top:0px;
padding-bottom:0px;
direction:rtl;
}
<div id='ArbText01'>ةالفصح
</div>
http://arabic001.com/home.html
Here ist one simple way to get fonts in css:
#import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
.droid-arabic-kufi {
font-family: 'Droid Arabic Kufi', serif;
}
Look at http://fonts.googleapis.com
What do you mean with Arabic fonts? Most "normal" fonts we use every day will work just fine in CSS. Do make sure to set the RTL properties though, where needed. After all, you don't want Arabic people to read left-to-right, do you? :-)
<html dir="rtl"> (combined with an English website it looks funny, but it's what you need for Arabic and other RTL languages)
you should provide a font-face like this:
#font-face {
font-family: 'mywebfont';
src: url('adobe_regular.eot');
src: url('adobe_regular.eot?#iefix') format('embedded-opentype'),
url('adobe_regular.woff') format('woff'),
url('adobe_regular.ttf') format('truetype'),
url('adobe_regular.svg#adobe_regular') format('svg');
font-weight: normal;
font-style: normal;
}
and now you should use 'mywebfont' as font family.
You could always find a free font from somewhere. I'm sure a quick google search would yield excellent results. If your talking about getting them to work, you'll need to look into UTF-8 encoding so that all the characters display correctly.
I will show how easy to integrate the "droidarabickufi" font onto your CSS file and how easy to apply it to your entire document (instead of applying it to individual classes).
First, Add this line at the top of your CSS document...
#import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
Then apply the rule to the "HTML" tag (to apply it for the entire doc).
html{font-family: 'Droid Arabic Kufi', serif;font-size:100%;}
Note: you have to check if another class uses custom font family like "Tahoma" or "Sans" or "Arial" or others.
Related
I am using two webfonts in a page that I convert to a PDF using dompdf. I have this in the header:
<link href='http://fonts.googleapis.com/css?family=Signika:600|Roboto+Condensed' rel='stylesheet' type='text/css'>
I then use them in CSS rules like
body {
font-family: "Roboto Condensed", sans-serif;
[ ... ]
}
h1 {
font-family:'Signika', Arial, Helvetica, sans-serif;
[ ... ]
}
Now, when I generate the PDF, the h1 is displayed with the "Signika" font, but "Roboto Condensed" is replaced by Helvetica or some other standard sans-serif font.
If I open the "preview" file (i.e. the php page which I then include in the PDF generation script), "Roboto Condensed" is displayed as expected, but it doesn't make it into the PDF. But as I wrote, "Signika" is there in the PDF, and that's somehow odd to me. BTW, I also tried to include the font-face rule directly in CSS rules for p, div, li etc. but that wouldn't change anything.
Any suggestions how I could fix that?
EDIT/ADDITION:
Thinking about it, a difference between the two fonts is that Roboto Condensed has a space in its name. I wonder if that could cause the problem (i.e. dompdf not being able to handle such a font name)? But I can't change that as long as I am fetching the fonts from the Google server.
I found the solution myself:
As I had added to my question in an edit, the reason obviously was that the font-family name "Roboto Condensed" contains a space, which dompdf doesn't seem to like.
I downloaded the font, created three versions of it with the font generator on Fontsquirrel and put them on my server, together with this stylesheet:
#font-face {
font-family: 'roboto_condensedregular';
src: url('robotocondensed-regular-webfont.woff2') format('woff2'),
url('robotocondensed-regular-webfont.woff') format('woff'),
url('RobotoCondensed-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Then, in my CSS rules I used that new font name roboto_condensedregular in font-family: roboto_condensedregular, sans-serif;
Now it works, also in the PDF.
You don't need to actually do all of this. Simply use the #importoption to embed the font in your html. Works like a charm using laravel-dompdf.
screenshot
For some reason the font I'm trying to add won't add itself to my website. I'd rather not do this with an image, so is it possible the font is broken? Would it be possible to fix it with just the otf or ttf?
My code (in case I'm missing something):
#font-face {
font-family: urbanJungle;
src: url('UrbanJungleDEMO.ttf');
}
h1 {
font-family: urbanJungle;
font-size: 100px;
color: #34495e;
}
Additional details: This is in the latest Chrome, other custom fonts work.
In the network console the font is red and it says cancelled.
Live URL: http://codestack.co.uk/website/
The font was from Dafont, no extra processing applied by myself, it's in the same directory as the index page. All the relevant CSS is included.
You should use Font Squirrel font-face generator for this: http://www.fontsquirrel.com/tools/webfont-generator
Different browsers need different font formats, you only provided one. The generator will convert your font to all the formats needed and give you a CSS file too, with no hassles.
You are using only TrueType font, IE support only *.eot fonts. And you are missing a lot informations. It is always better to use font stack instead of using single font, if first font went missing css use immediate next font on the list (called font-stack).
Here is an interesting article about #font-face by Paul Irish : Bulletproof #font-face Syntax
#font-face{
font-family:MyFont;
src:url(../font/MyFont.eot);
src:local('?'),
url(../font/MyFont.woff) format("woff"),
url(../font/MyFont.otf) format("opentype"),
url(../font/MyFont.ttf) format("Truetype"),
url(../font/MyFont.svg#myfont) format("svg");
font-weight: normal;
font-size:normal;
}
body{
font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}
I'm using a custom icon-font using CSS3's #font-face and in older version of Google Chrome, only the unicodes are showing and are not being replace or rendered in my custom font, which shows the glyphs for those unicodes.
Here is the #font-face syntax that I am using:
#font-face{
font-family:'glyphs';
src:url('../fonts/glyphs.eot');
src:url('../fonts/glyphs.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphs.svg#glyphs') format('svg'),
url('../fonts/glyphs.woff') format('woff'),
url('../fonts/glyphs.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Any idea why the unicodes are showing and not the symbols that are part of the icon-font?
You're possibly running into unicode-range limitations. As described here you can define in a font-face declaration which Unicode characters are covered. It could very well be that older Chrome versions only replaced Latin characters by default. You should be able to fix this by adding this to your font-face declaration:
unicode-range: U+00-FFFF;
Having said that, it could very well be that you're only having a local issue. Check in your Chrome settings, under Advanced Settings, under Web Content click Customize Fonts, then at the bottom check the current setting for Encoding. Changing its value to "Unicode (UTF-8)" could solve the issue as well.
Try switching the orders of the fonts you are loading. Some browsers, even older version of chrome, load svg fonts in weird / incomplete ways.
Try:
#font-face{
font-family:'glyphs';
src:url('../fonts/glyphs.eot');
src:url('../fonts/glyphs.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphs.woff') format('woff'),
url('../fonts/glyphs.ttf') format('truetype');
url('../fonts/glyphs.svg#glyphs') format('svg'),
font-weight: normal;
font-style: normal;
}
I may be going out on a limb here, but is it possible that the document displaying the font either a) declares a character encoding other than UTF-8 / UTF-16 (or isn't explicitly declared) or b) the html document is saved in an encoding other than UTF-8 / UTF-16?
A very common problem causing websites to display characters incorrectly is having a different declared character encoding in the HTML than the encoding used to save the HTML document. Also, the use of characters that are part of either of these encodings can create issues.
You should post the HTML code as well for us to answer better. I'm assuming you are using data-icon attribute in HTML. In that case, you should add this code after your font-face css code.
[data-icon]:before {
font-family: 'glyphs';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
I've had some problems with relative paths, old browsers and font-face declarations in the past: you might want to try with a fixed path (/someFolderInRoot/fonts/glyphs.svg) or a relative path under the css file-path (fonts/glyphs.svg).
Does it all work in a newer version of Chrome and other browsers?
Chrome installs updates automatically for most users, so perhaps you're making the website backwards compatible for a version nobody uses.
I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).
And they support a nice amount of browsers.
How does one do that? While also preventing people from having free access to download the font, if possible.
Generically, you can use a custom font using #font-face in your CSS. Here's a very basic example:
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}
Then, trivially, to use the font on a specific element:
.classname {
font-family: 'YourFontName';
}
(.classname is your selector).
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS #font-face rules, so you don't have to write your own).
while also preventing people from having free access to download the font, if possible
Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.
To make sure that your font is cross-browser compatible, make sure that you use this syntax:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
Taken from here.
You have to download the font file and load it in your CSS.
F.e. I'm using the Yanone Kaffeesatz font in my Web Application.
I load and use it via
#font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
in my stylesheet.
Today there are four font container formats in use on the web: EOT, TTF, WOFF,andWOFF2.
Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers:
EOT is IE only,
TTF has partial IE support,
WOFF enjoys the widest support but is not available in some older browsers
WOFF 2.0 support is a work in progress for many browsers.
If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in CSS
#font-face {
font-family: 'besom'; !important
src: url('fonts/besom/besom.eot');
src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
url('fonts/besom/besom.woff2') format('woff2'),
url('fonts/besom/besom.woff') format('woff'),
url('fonts/besom/besom.ttf') format('truetype'),
url('fonts/besom/besom.svg#besom_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
If you dont find any fonts that you like from Google.com/webfonts or fontsquirrel.com you can always make your own web font with a font you made.
here's a nice tutorial: Make your own font face web font kit
Although im not sure about preventing someone from downloading your font.
Hope this helps,
there's also an interesting tool called CUFON. There's a demonstration of how to use it in this blog
It's really simple and interesting. Also, it doesn't allow people to ctrl+c/ctrl+v the generated content.
I am working on Win 8, use this code. It works for IE and FF, Opera, etc.
What I understood are : woff font is light et common on Google fonts.
Go here to convert your ttf font to woff before.
#font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}
First of all, you can't prevent people from downloading fonts except if it is yours and that usually takes months.
And it makes no sense to prevent people from using fonts.
A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below.
But if you want to implement a font into your website read this:
There is a pretty simple and free way to implement fonts into your website.
I would recommend Google fonts because it is free and easy to use.
For example, I'll use the Bangers font from Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers)
This is how it would look like:
HTML
<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
CSS
body {
font-family: 'Bangers', cursive;
}
I'm making a website for a friend and he wants the text font to be AR BONNIE. Does anyone know the CSS for this? I can't seem to find the font anywhere.
Go to this site: onlinefontconverter and create woff, eot, svg and ttf files
and put this in css
#font-face {
font-family: 'ARBONNIE';
src: url('ar-bonnie.eot');
src: local('☺'),
url('ar-bonnie.woff') format('woff'),
url('ar-bonnie.ttf') format('truetype'),
url('ar-bonnie.svg#ARBONNIE') format('svg');
font-weight: normal;
font-style: normal;
}
and you can set p { font-family: 'ARBONNIE'; }
AR BONNIE is not een valid webfont.(see http://web.mit.edu/jmorzins/www/fonts.html)
There are different types of solutions.
Use javascript: sifr or cufon or typeface
Use css3 - #font-face (not supported by all browsers)
Always check if the font is legal for your project. EULA rights...
Andes, from Dafont, is pretty close:
But since its not web font , you have to embed exclusively.
You can also take a look at
http://code.google.com/webfonts
its google web font , you can use in css.
http://www.dafont.com/search.php?psize=m&q=andes
If you want to use a font in CSS, you must make sure that all of your visitors have that font installed, or provide it in an url, or display it as a bitmap or via flash.
A great option is using typeface.js. I've not used it myself in any of my sites, but I loved the concept, and the examples they've provided.
AR BONNIE is a replicated version of the Ascender "Plaza" font which was then resold as AR BONNIE.
Click here for the Plaza font.