I was finally able to get my site to show an Arabic font, but it is a default font that I don't want.
With the help of the SO community I found out about Dejavu fonts. I went to their website and downloaded a sans serif zipped folder. I am assuming I have to upload something to my server. If so which file/s do I upload? And what do I write in my html file to "reference" the fonts to my site? I opened all the files in the zip folder and only one of them indicated that I can download the font. But I don't need to download it on my computer. I need to upload it to the cloud so that it will be on my website.
Any ideas?
Also How can I upload the Dejavu folder here so that people can see it and know what I am talking about?
#font-face and #font-face Font Squirrel Generator
If you wish to use font embedding (and #font-face), then you need to present the font in different formats if you wish cover most platforms. See e.g. The Essential Guide to #font-face.
But there’s a much simpler way: just declare your preferred fonts (after checking that each of them covers all the characters you use) in your font-family declaration in CSS. Not all people would then see the text in DejaVu (only those who have got it along with e.g. Linux of OpenOffice or who have separately downloaded an installed it). The overhead of downloading a largish font, or several fonts, is not ignorable, especially when using e.g. slow mobile connections.
Expanding on bookcasey's point:
Check out the #font-face kits at Font Squirrel. There are several DejaVu kits available. Kits include the CSS and the DejaVu files in pretty much every available format you can use on the web. Put the font files in whatever folder you like and alter the CSS accordingly.
For example, I store my font definitions in /css/fonts.css and my fonts in /fnt/FontName/
From fonts.css
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.svg#DejaVuSansBook') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.svg#DejaVuSansOblique') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.svg#DejaVuSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.svg#DejaVuSansBoldOblique') format('svg');
font-weight: bold;
font-style: italic;
}
Using the font is then simply:
body {
font-family: 'DejaVu Sans',sans-serif;
}
Related
#font-face {
font-family: Han Sans;
src: url(http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.woff2) format('woff2'),
url(http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.woff) format('woff'),
url(http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.ttf) format('truetype');
font-weight: 500;
}
I uploaded some font files onto my webhosting, and trying to load it as webfont. But it seems that I can't use theese, and I can't even know why..
If this is an Adobe font, make sure you have your permissions are correctly set on the Typekit site.
I have my font in all of the formats known to man, and for some reason they will not load on any windows browser. Here is my code:
#font-face {
font-family: 'AvenirNext-Regular';
src: url('/avenir/AvenirNext-Regular/AvenirNext-Regular.eot');
src: url('/avenir/AvenirNext-Regular/AvenirNext-Regular.woff2') format('woff2'),
url('/avenir/AvenirNext-Regular/AvenirNext-Regular.woff') format('woff'),
url('/avenir/AvenirNext-Regular/AvenirNext-Regular.ttf') format('truetype'),
url('/avenir/AvenirNext-Regular/AvenirNext-Regular.svg#AvenirNext-Regular') format('svg'),
url('/avenir/AvenirNext-Regular/AvenirNext-Regular.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
It's probably something small but I cannot figure out what it is.
In most cases, URLs shouldn't start with /, as the operating system will understand them as absolute paths. Is the avenir folder in the root of the site?
To avoid browser's cache, I want to concat version querystring to my #font-face's url. There are lots of urls. How to this in right way?
#font-face {
font-family: 'fontawesome';
src: url('/styles/fonts/fontawesome/fontawesome.eot?6840zz');
src: url('/styles/fonts/fontawesome/fontawesome.eot?6840zz#iefix') format('embedded-opentype'),
url('/styles/fonts/fontawesome/fontawesome.ttf?6840zz') format('truetype'),
url('/styles/fonts/fontawesome/fontawesome.woff?6840zz') format('woff'),
url('/styles/fonts/fontawesome/fontawesome.svg?6840zz#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Most implementations of Font Awesome will append versioned query strings to the #font-face font paths. These versioned query strings will bust the cache when the font is updated to a new version. That is, when you update the font the versioned query string will change from something like ?v=4.7.0 to ?v=4.7.1.
In most cases you won't need to do anything extra as most implementations will handle this for you. Keep in mind, many other #font-face generators and packages will also append a version param. Here are a few examples:
Download the Font Awesome kit
If you download the Font Awesome kit from http://fontawesome.io/ the included font-awesome.css file will have versioned query strings attached to the paths. Ex.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
the ?v=4.7.0 is the versioned query string. This version number will change if you download a new version of Font Awesome down the road.
Font Awesome CDN
If you use the CDN implementation you'll get a <script> to include, like
This will import the following CSS:
#font-face {
font-family: 'FontAwesome';
src: url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.eot');
src: url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff2') format('woff2'),
url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff') format('woff'),
url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.ttf') format('truetype'),
url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
The URLs to the Font Awesome CDN has the version number included, and this will change when updated, breaking the cache and eliminating the need for appending a versioned query parameter.
Using Sass or Less
If you're using the Less/Sass files the versioned query string will be added. Ex.
#font-face {
font-family: 'FontAwesome';
src: url('#{fa-font-path}/fontawesome-webfont.eot?v=#{fa-version}');
src: url('#{fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{fa-version}') format('embedded-opentype'),
url('#{fa-font-path}/fontawesome-webfont.woff2?v=#{fa-version}') format('woff2'),
url('#{fa-font-path}/fontawesome-webfont.woff?v=#{fa-version}') format('woff'),
url('#{fa-font-path}/fontawesome-webfont.ttf?v=#{fa-version}') format('truetype'),
url('#{fa-font-path}/fontawesome-webfont.svg?v=#{fa-version}#fontawesomeregular') format('svg');
// src: url('#{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
}
The #{fa-version} will append the current version (currently 4.7.0 to the font path. This version number will update when the font is updated. In this sense you can update all the version query params at once by changing the fa-version variable.
#iefix
Regarding the #iefix hash, this is a method of fixing an issue in IE8 and below when defining multiple font formats within a single src. If you need your font to work in IE8 and below you need to add the #iefix (or any hash`) so those browsers don't throw errors. More on that in this SO question.
Other #font-face Fonts and Implementations
If you're using a font other than Font Awesome, or another implementation, you can append a hash onto the font paths to create your own cache-bust. It's fairly common to see a date string appended, like 01302017, which can be updated manually or via a build script when needed.
I use Brackets code editor and in the live preview it works perfectly but once I upload it onto the actual site it defaults to Arial. I've put the font in the css folder but I just don't understand why it doesn't work on the live site.
Here is my code.
#font-face {
font-family: BMgermar;
src: url('http://example.com/css/BMgermar.TTF') format('truetype');
}
Thanks in advance.
You Most Upload The Font In five Formats To Work Perfectly like This Code
#font-face {
font-family: 'droidkufi';
src: url('../fonts/droidkufi/droidkufi-webfont.eot');
src: url('../fonts/droidkufi/droidkufi-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/droidkufi/droidkufi-webfont.woff') format('woff'),
url('../fonts/droidkufi/droidkufi-webfont.ttf') format('truetype'),
url('../fonts/droidkufi/droidkufi-webfont.svg#droid_arabic_kufiregular') format('svg');
font-weight: normal;
font-style: normal;
}
And The Font Formats is:
eot
woff
ttf
svg
OR You Can Simply Import The fonts form https://www.google.com/fonts
I rely heavily on Google Webfonts for my site and (unfortunatly) google chrome presents them badly, i have set font-smooth to always, but it dosen't seem to help.
EXAMPLES:
Is there any way i could smooth them / make them look better??
Thanks,
Font rendering problems are common in GChrome, try changing the order of your #font-face sources... Chrome utilises the .svg file in the #font-face sources, in some reason it doesn´t tolerate .svg being called last in the list
#font-face {
font-family: 'my-dirty-font';
src: url('../fonts/my-dirty-font.eot');
src: url('../fonts/my-dirty-font.eot?#iefix') format('eot'),
url('../fonts/my-dirty-font.woff') format('woff'),
url('../fonts/my-dirty-font.ttf') format('truetype'),
url('../fonts/my-dirty-font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
If the order #font-face order looks similar then try changing to
#font-face {
font-family: 'my-dirty-font';
src: url('../fonts/my-dirty-font.eot');
src: url('../fonts/my-dirty-font.eot?#iefix') format('eot'),
url('../fonts/my-dirty-font.svg') format('svg');
url('../fonts/my-dirty-font.woff') format('woff'),
url('../fonts/my-dirty-font.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Personally I would use
http://www.fontsquirrel.com/
It's all hosted on your server and it's compatible with nearly every browser! Since using Font Squirrel I haven't looked elsewhere.