My Website that I'm hosting on Github Pages with a namecheap domain, doesn't allow iOS users (haven't tried android) to see the fonts. I've tried this on iOS 14.3 on an iPhone 7 with both Safari, and Chrome
The font displayed on my Windows 10 Computer is Calibri but on iOS it shows up as Times New Roman (default)
my website is http://joswinjohn.me,
html file is https://raw.githubusercontent.com/joswinjohn/joswinjohn.github.io/master/index.html
css file is https://raw.githubusercontent.com/joswinjohn/joswinjohn.github.io/master/css/style.css
the repo is https://github.com/joswinjohn/joswinjohn.github.io if you need anything else
if there's anything I've left out please let me know!
Your Windows device is correctly displaying your "Calibri" font because that font is already installed on the device. To use a font that is not installed in the target device, you need to include the font file itself and reference it in your CSS file:
#font-face {
font-family: Calibri;
src: url("Calibri.ttf") format("truetype"), url("Calibri.otf") format("opentype"), url("Calibri.woff") format("woff"), url("Calibri.woff2") format("woff2");
}
In src you can use 1 or more url()s. If you use more than one, the browser will use the first match, or the first one it supports. Make sure what is inside url() matches your font file's path.
Related
I specified a font in CSS - it works and loads correctly in desktop chrome, but Arial is loaded instead in desktop Safari and mobile generally - I'm sure I'm missing something really simple but I can't see what it is.
I'm hosting the site on Github and using a netlify free subdomain as this is an experiment - I'm not sure if that's relevant information.
#font-face {
font-family: Karla;
src: url(.../jsc/Karla-Regular.ttf) format ('truettype');
}
I am making an email template and I'm trying to find the right fonts for it.
My problem is that I cannot use #font-face AT ALL (it's stripped out using sendgrid). and thus I need the fonts to be installed on the machine of the user and accessible by font-family without using #font-face.
How would I find suitable fonts to use? Also; I cant use Javascript because some email clients don't allow that.
If you want to see "how many machines have them installed." - this is simply impossible & not even the right approach.
The right approach(Safe web fonts) would be to use #font-face fetching fonts from users local machine(Windows/MAC pre-installed) using the local() to fetch from the users pre-installed fonts.
font-face {
font-family: 'myFont';
src: local('Verdana');
src: local('Arial');
src: local(sans-serif);
//result would be - font-family: 'Verdana', 'Arial', sans-serif;
}
The location in any Windows users machine from where the fonts are being pulled is:
C:\Windows\Fonts
The location in any MAC users machine from where the fonts are being pulled is:
/Library/Fonts/
You could see all other pre-installed fonts here as well.
You can check from these, all the common fonts that are pre-installed on Windows & MAC
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
http://web.mit.edu/jmorzins/www/fonts.html
UPDATED
If sendgrid is stripping all your embedded styles then use inline styles instead on your elements/body.
<body style="font-family: 'myFont'; src: local('Verdana');">...</body>
There are also some good inliner out there that will convert your embedded CSS to inline CSS.
Zurb email inliner - http://foundation.zurb.com/emails/inliner.html
Problem details:
I have the problem that Internet Explorer 10 (under Windows 7 - 64 Bit) does not load fonts embedded with #font-face in CSS. Instead it shows "Arial" or a font like that. I have tested this problem on multiple devices:
Windows 8 with Internet Explorer 11 (64 Bit)
Windows 8 with Internet Explorer 10 (64 Bit)
Windows 7 with Internet Explorer 10 (64 Bit)
But for me this problem never occured. But the strange thing is that this problem occurs on a customer PC with Internet Explorer 10 and Windows 7 64 Bit.
The other strange thing is that in the "Network" tab of Internet Explorer shows all resources, but IE will not show any font.
Luckily I have a customer PC to debug this issue. I could not figure out what the problem is yet.
What I already did to find a solution:
I have ensured that the path and font-family name is correct. I also ensured that the #font-face command is inside the CSS file I have embedded
I tried to add the doctype from:
<!DOCTYPE html> to
<!DOCTYPE html SYSTEM "about:legacy-compat">
I updated the meta tags, e.g.:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I also tried to change the order of the font-face url commands
I removed the ' from the name of the font-family, so from:
font-family: 'My font'; to
font-family: My font;
I also tried to force the correct MIME of the font with a .htaccess file like:
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-opentype .otf
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/x-woff .woff
I also installed the website on another server to be sure this is not a server problem
I ensured that the chekboxes in Internet Explorer 10 under "Internet options" -> "Accessibility" are not checked
Technical things:
I am embedding my CSS with:
<link rel="stylesheet" type="text/css" href="assets/css/base.css">
My #font-face command looks like:
#font-face {
font-family: MyFont;
src: url('myPath/MyFont.eot');
src: url('myPath/MyFont.eot?#iefix') format('embedded-opentype'),
url('myPath/MyFont.woff') format('woff'),
url('myPath/MyFont.ttf') format('truetype'),
url('myPath/MyFont.svg#myfont') format('svg');
font-style: normal;
font-weight : normal;
}
// EDIT:
I just want to point out that CSS fonts work generally. But unfortunately not in on this site.
Getting #font-face working in Internet Explorer may just be spooky enough.
as well as you know #font-face already works in Safari 3 via WebKit and is supported in the latest Firefox 3.1 beta.
With IE, that means around 75% of the world audience could see custom typefaces today if their EULAs allowed it.
Fortunately, there are good free faces available to us already, as well as some commercial faces that permit embedding.
so..my onion to use latest version of browser like- chrome, firefox 3.1, safari 3.
Thank you.....
Here is what solved my problem:
I found out that the customer has a "whitelist" of hosts. Unfortunately my server wasn't on this list. So the customers proxy blocked all font requests from my server.
I don't know the reason for it, but I think the one who configured the proxy thought that a virus or trojan could be downloaded over a font.
I want to use Gotham font for my website which is not a web-safe font so I have the font sitting in the directory called 'gotham':
index.html
style.css
Gotham/Gotham-Light.otf
Here's what my CSS file looks like in the part that sets the font:
p.gotham-thin{font-family:"Gotham-Light";}
#font-face {
font-family: Gotham-Light;
src: url('Gotham/Gotham-Light.otf') format('opentype');
}
here's what index.html does:
<p style="margin-top:140px; font-size:54px;" class="gotham-thin">ABOUT DIALOGIC</p>
but the Gotham font is only working on my computer in Google Chrome since I have the font installed locally, but when I run a VM that doesn't have the font installed then it will just use Tahoma font instead.
Is the problem that I'm using the OTF font file type?
Here are my steps to have the font working:
Font face first in css (font code on top of master css)
Have the type/format of font - EX: src: url(Gotham.ttf) format('truetype')
Also multiple fonts to support all browsers like the comment replied you got.
Make sure your host (local or not) has the MIME type for these fonts
I have been trying to get the ttf files rendered in Chrome and Firefox but it just doesn't seem to work. While rendering the .woff file is working fine.
I downloaded the collection from http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher and then renamed the Philosopher-Regular.ttf to fancyfont.ttf and then tried:
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
But the font just doesnt seem to add on to the webpage. However if i rename the woff file to fancyfont.woff and try :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
then it all works fine for Chrome and Firefox.
Any solutions to this problem as i have seen the ttf files being rendered onto the browser?
Do not download a TTF from the Google Font API website. It is not intended for you to download the fonts. Instead, you link to a stylesheet which contains #font-face definitions for the font(s) you want to use.
<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
(Do not include multiple <link>s if you want several fonts; instead, use the tool to add all the fonts you want in your page to a collection, and it will generate the appropriate <link> tag.)
Letting Google host the fonts is just like using a well-known CDN for jQuery: there's a good chance that a significant portion of your users will already have the font cached before they even come to your site (by virtue of the fact that they may have browsed other sites that used the same font).
Note that the CSS you link to from the API is actually generated for each individual request by Google's server, tailoring it to the user's browser. Based on the user agent, the most appropriate formats (WOFF, EOT, TTF, etc) are selected and only those are listed in the stylesheet.
Because formats like WOFF are much more efficient size-wise than TTF, most browsers will never see a TTF version. Don't worry though – your font will be rendered correctly in all browsers.
I had some issues rendering a TTF font inside Chrome. convert it into Woff solved it. There is some good onlines services for that. You can find them easily. Also, the size of my font got smaller : 29 Ko to 6 Ko, I don't see anymore reasons to use TTF
Actually the issue was that the TTF files can not be renamed or that they should not be renamed. As I did the same they were not being rendered by the browser. While the renaming of the WOFF is just fine as they are compressed files.
The issue was definitely renaming as when i used the Philosopher-Regular.ttf in font face as :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/Philosopher-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
it worked just fine.