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');
}
Related
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.
Good Morning,
Today my Google chrome browser updated to 42 (42.0.2311.90), I have noticed alot of things going wrong with the site I'm working on, text will go through divs, padding being ignored.
The interesting thing is if you inspect the element and untick anything and tick it back again it starts working fine. No issues in any other browser or previous version of chrome (colleague still has 41). If you refresh the page a number of times the site appears correctly. If I delete the #font-face, the site works correctly.
It would appear that chrome seems to have either changed the way it draws/renders the external font or, it loads this last after drawing all the other elements.
Does anyone know any possible fixes or smooth way to use #font-face to make it (new version) chrome friendly?
#font-face {
font-family: 'MyFontFile';
src: url("../css/fonts/MyFontFile.eot") format("embedded-opentype"),
url("../css/fonts/MyFontFile.ttf") format("truetype"),
url("../css/fonts/MyFontFile.svg") format("svg"),
url("../css/fonts/MyFontFile.woff") format("woff");
font-style: normal;
font-weight: normal;
}
In order to fix this, I had to force the browser to redraw. Putting the following jquery in, this forces the browser to redraw.
$('body').hide().show(0);
The font Arizonia doesn't work in Firefox, I tried a lot, set gfx.downloadable_fonts.enabled to false and more, and now I'm asking for help.
I'm using this:
#font-face {
font-family: 'arizonia';
src: url(arizonia-regular.woff)format('woff');
src: url(arizonia-regular.ttf)format('truetype');
font-weight:normal;
font-style:normal;
}
In every browser it works fine, but in FF. I added the code from google fonts to my site, copied the files to my rootfolder en loaded the css files in DW. It looks a bit ribbed in FF.
In case you are running the site locally:
You might need to open about:config and set security.fileuri.strict_origin_policy to false.
After this local documents have access to all other local documents, including directory listings.
ref: CSS #font-face not working with Firefox, but working with Chrome and IE
According to Firefox webfonts not loading try font-family: arizonia; without the quotes.
I'm running into an incredibly frustrating issue with webfonts on my employer's website. (screenshot here: http://imgur.com/Pvb5lrl)
I've added all the font files and, as best as I can tell, written the code correctly. However, the text is rendering incredibly jagged and ugly in Chrome and Firefox. What's bizarre is that a simple test I set up using the same font files, same #font-face code, and same CSS for the text itself is rendering just fine in the same browsers on the same machine. Any idea what might be causing the crappy rendering on the full website? URLs to both are below for reference.
Company website: http://staging.lmsonline.com/services/email-marketing/
Simple test: http://datafulfill.com/fonttest/demo.html
Screenshot (Windows 7, Chrome): http://imgur.com/Pvb5lrl
Not sure, what your font is supposed to look like. At my end it arrives sort of Arial, which is pretty much the same as a generic sans-serif anyway. Playing around with fonts in the past taught me to address the issue in this order:
#font-face {
font-family:"Delitsch Antiqua";
src:url("/path/to/fonts/DelitschAntiqua.eot");
}
#font-face {
font-family:"Delitsch Antiqua";
src:url("/path/to/fonts/DelitschAntiqua.ttf");
}
First serve IE, then the rest. For some reason it never quite worked the other way around.
Can't seem to get my font working in firefox, seems to work fine in IE, chrome and Safari
<style type="text/css">
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.eot") /* EOT file for IE */
}
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.TTF") /* TTF file for CSS3 browsers */
}
</style>
This is the website here, http://www.brightonorient.com - the front page text Brighton Orient should be Monotype corsiva.
Thanks for any help
I typically use Font Squirrel for my #font-face needs and have never had an issue. Check this link to see if the trouble shooting tips provide any help. If it is any consolation, in Firefox on my machine I can see the font load just fine and render properly. Throwing FireBug on it shows the font loaded properly as well. Not sure why you're not seeing it work unless your Firefox is not up-to-date.
Technically, it works for me on WinXP SP3 with Fx 6.0.2 but not with Fx 11.0
Though, on the legal side (IANAL), it seems you don't have the rights to use Monotype Corsiva with #font-face: only Monotype does. See http://www.fonts.com/findfonts/detail.htm?productid=172339 and their service http://webfonts.fonts.com for maybe a solution.
Using it on your computer and distributing it to every visitor via your server are often two very different licences!
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
go to this link http://www.fontsquirrel.com/fontface/generator
upload your font
then download all files have different font formats which is supported for different browsers
and use in your project. now it will work accurately in all browsers