Tahoma and verdana font not work in mobile or tablet
My code is :
* {
font-family:tahoma,verdana !important;
}
But not work in mobile devices
Extract the font file you want, and upload it to fontsquirrel.com.
Then take out the following fonts from the package and add the following into your CSS file:
#font-face {
font-family: 'Tahoma';
src: url('path/to/Tahoma.eot');
src: url('path/to/Tahoma.eot?#iefix') format('embedded-opentype'),
url('path/to/Tahoma.woff') format('woff'),
url('path/to/Tahoma.ttf') format('truetype'),
url('path/to/Tahoma.svg') format('svg');
font-weight: normal;
font-style: normal;
}
You can then use the font in your css file by using:
font-family: 'Tahoma', sans-serif;
Most android phones only have a few fonts available by default.
Tahoma is not available on mobile.
You can upload the font to your site and load it with css. See also Google Fonts ;)
Edit : be careful of copyright
Related
I'm trying to use the Gill Sans-Light font on my website, but for some reason I can't seem to make the font work on iOS devices only. To demonstrate what I mean, here's a screenshot of the same font when I open my website in an Android phone, and when I open it in an iOS phone.
Android:
iOS:
Yes, I know there are lots of questions in here about this particular problem, I've read through them all but I can't seem to make my font work no matter what solution I use.
If it helps, I used Transfonter to convert the font format to EOT, WOFF2, WOFF, TTF and SVG.
Here's my code:
#font-face {
font-family: 'Gill Sans';
src: url('../fonts/GillSans-Light.eot');
src: url('../fonts/GillSans-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/GillSans-Light.woff2') format('woff2'),
url('../fonts/GillSans-Light.woff') format('woff'),
url('../fonts/GillSans-Light.ttf') format('truetype'),
url('../fonts/GillSans-Light.svg#GillSans-Light') format('svg');
font-weight: 300;
font-style: normal;
}
Thank you for your help.
iOS and macOS both include Gill Sans as a system font, so you are probably getting the default Regular weight of that, rather than your hosted version.
One option would be to intentionally use the system version on platforms that have a font called Gill Sans installed:
#font-face {
font-family: 'Gill Sans';
src: local('GillSans-Light'),
url('../fonts/GillSans-Light.woff2') format('woff2'),
url('../fonts/GillSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
A more predictable option, especially for a typeface like this where there are many different “cuts” or digital versions, is to change the font-family name to something less likely to conflict with a system font. For example:
#font-face {
font-family: 'Example family name';
src: url('../fonts/GillSans-Light.woff2') format('woff2'),
url('../fonts/GillSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
h1 {
font-family: 'Example family name', GillSans-Light, sans-serif;
font-weight: 300;
font-style: normal;
}
Obligatory further reading: https://en.wikipedia.org/wiki/Eric_Gill
I have the Helvetica Light font for HTML pages used in the Android and iOS application. The problem is when I give font-weight: bold to the headings, it works fine on Android but not on iOS devices.
Here is the font-face:
#font-face {
font-family: 'HelveticaLight';
src: url('./fonts/helveticalight.eot');
src: url('./fonts/helveticalight.eot') format('embedded-opentype'),
url('./fonts/helveticalight.woff2') format('woff2'),
url('./fonts/helveticalight.woff') format('woff'),
url('./fonts/helveticalight.ttf') format('truetype'),
url('./fonts/helveticalight.svg#helveticalight') format('svg');
}
The problem is you're not loading a bold version of Helvetica — you're only loading Helvetica Light. If a proper bold version is missing, like in your case, most OSes or browsers will create a fake bold version by making the thin font "fatter" (a.k.a. faux bold). But iOS won't: it will stick to the original font you requested: Helvetica Light.
The solution is to include a #font-face rule where you load Helvetica Bold.
You can try this:
body{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Try this example;.textweight{
font-family: sans-serif;
font-weight: 800;
}
How to convert a online font link into local ones? (Probably download the font file is ok)
for example, HTML and CSS from google fonts:
HTML:
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Source+Sans+Pro" rel="stylesheet">
CSS:
font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
or with import style:
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald|Roboto|Source+Sans+Pro');
</style>
The main goal here is:
After download, and convert to local. The whole website can be served locally in local network, without internet connection.
You can take help from the google web font helper. Its really a handy tool to download the google fonts and install them locally.
The benefit of this tools and Implementation:
1. It will provide all format of fonts ( .eot, .woff, .woff2, .svg, .ttf ).
2. Help you in implementation with css. It generates css of the selected font and styles.
example of css code:
/* open-sans-regular - latin */
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Open Sans'), local('OpenSans'),
url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
3. Manually Select all font weights and style you want to include in your project and download them.
You have to download the font file and declare it in the css :
#font-face { font-family: Roboto; src: url('Roboto.otf'); }
I'm using the following structure in a website:
Root
theme
index.html
assets
myfont
css
fontiran.css and style.css
fonts
IRANSansWeb.eot , IRANSansWeb.woff, IRANSansWeb.woff2, and IRANSansWeb.ttf
And the contents are:
index.html:
[...]
<link href="../assets/myfont/css/style.css" rel="stylesheet">
[...]
style.css:
#import url(fontiran.css);
body {
font-family: IRANSans !important;
}
fontiran.css:
#font-face {
font-family: IRANSans;
font-style: normal;
font-weight: normal;
src: url('../fonts/IRANSansWeb.eot');
src: url('../fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),
url('../fonts/IRANSansWeb.woff2') format('woff2'),
url('../fonts/IRANSansWeb.woff') format('woff'),
url('../fonts/IRANSansWeb.ttf') format('truetype');
}
But the font is not working on the website. FontFinder plugin for firefox shows:
Font
===============================
font-family (stack): IRANSans
Font being rendered: System Default
font-size: 13px
But it's not being used. What is the problem exactly?
Only Internet Explorer supports EOT files.
Use WOFF and WOFF 2 instead as they have decently wide browser support.
I'm trying to import a CSS font but unfortunately it's not working and I'm really unsure why.
The font in the filesystem called 'deadjim.ttf' It is placed inside my main public_html and yes it is the correct path, visiting the path downloads the file.
#font-face {
font-family: 'deadjim';
src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}
I've tried clearing my cache but this hasn't worked either. Apparently it's working on Safari but I have no means of checking having a windows PC
Make sure that you're calling the font like normal; #font-face doesn't apply any styles to the html, it just defines the font.
#Define your font
#font-face {
font-family: 'deadjim';
src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}
#Will apply the font as default on the entire page
html, body{
font-family: 'deadjim';
}
To be sure your font works in all browser / most platforms, you will need to do something similar to this (with all formats provided) - it's not enough to just have the .ttf-file.
Here's an example of including FontAwesome:
#font-face {
font-family: 'fontawesome';
src: url('fontawesome-webfont.eot?v=4.7.0');
src: url('fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}