Recently I used a custom font on my websites. After uploading it to a server, I was only able to view the font in Google Chrome. In Firefox and IE, the font switched back to Times New Romans. However, after uploading it to another server, both FF and Chrome can view it but IE still can't. Is there any way to ensure that all browsers can use the font?
Make sure your #font-face rule like below
#font-face {
font-family: "Calibri";
src: url('fonts/calibri_2.eot');
src: url('fonts/calibri_2.eot?#iefix') format('embedded-opentype'),
url('fonts/calibri_2.svg#Calibri') format('svg'),
url('fonts/calibri_2.woff') format('woff'),
url('fonts/calibri_2.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Related
I'm building my first website from scratch and in the meantime, I would like to have a "Work in progress" page. The page works correctly on Desktop and Android devices, but the font is displayed in a weird way on iOS devices, a little bit shrunk vertically and doubled.
My css looks like this right now and I can't figure out what's the problem.
#font-face {
font-family: 'montserratregular';
src: url('fonts/montserrat-regular-webfont.woff2') format('woff2'),
url('fonts/montserrat-regular-webfont.woff') format('woff'),
url('fonts/montserrat-regular-webfont.eot') format('embedded-opentype'),
url('fonts/montserrat-regular-webfont.ttf') format('truetype'),
url('fonts/montserrat-regular-webfont.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
Not even all of these should be necessary, since I think that ttf and woff (eventually wof2) should be enough.
EDIT:
Screenshot for reference:
I have some fonts that are used throughout my site and in IE the font doesn't render correctly (at all). I've done some researching around and it appears I need to set it to installable embedding allowed. I've tried using http://carnage-melon.tom7.org/embed/ but when I download the embed.exe the terminal doesn't appear. This is only an Issue in IE works fine in chrome, opera, safari and firefox.
IE Console Log:
CSS3114: #font-face failed OpenType embedding permission check. Permission must be Installable.
CSS
#font-face {
font-family: 'droid-sans-regular';
src: url('../fonts/DroidSans-webfont.woff') format('woff'),
url('../fonts/DroidSans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
you need the eot font type for ie:
src: url('../fonts/DroidSans-webfont.eot'); /* IE9 and above */
src: url('../fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), /* IE8 */
So I've read that there is a bug on Chrome for Windows which cause bad rendering. Is this the same for Opera? And why isn't it working for IE?
Font: http://www.google.com/fonts#UsePlace:use/Collection:Libre+Baskerville
Embedding:
wp_enqueue_style('fontbask', 'http://fonts.googleapis.com/css?family=Libre+Baskerville:400,500,700,400italic&subset=latin,latin-ext');
CSS I've tried
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-stroke: 1px transparent;
Result:
Brwoser versions:
Opera 19.0.1326.63
Chrome 32.0.1700.107 m
Internet Explorer 11.0.9600.16518
Firefox 26.0
I also tried to use font-face to include the fonts, which had exactly the same result.
#font-face {
font-family: 'LibreBaskerville';
src: url('fonts/LibreBaskerville-Regular.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
I downloaded the fonts # http://www.fontsquirrel.com/fonts/libre-baskerville?q[term]=baskerville&q[search_check]=Y
In this screenshot it doesn't look that bad, but you can see live here: http://www.citizen-science.at/wordpress/
I also found that the font from http://www.google.com/fonts#UsePlace:use/Collection:Libre+Baskerville is rendered as badly as well. So it seems it is a browser issues.
When I'm using my local fonts instead of Google fonts, IE is able to show it, but Opera and Chrome still don't
Opera have issue in font rendering. this will help you finding the solution. If Google fonts are not must use for you then i recommend this website for web font generation. This works awesomely with cross browser compatibility.
#font-face {
font-family: 'libre_baskervilleregular';
src: url('librebaskerville-webfont.eot');
src: url('librebaskerville-webfont.eot?#iefix') format('embedded-opentype'),
url('librebaskerville-webfont.woff') format('woff'),
url('librebaskerville-webfont.ttf') format('truetype'),
url('librebaskerville-webfont.svg#libre_baskervilleregular') format('svg');
font-weight: normal;
font-style: normal;
}
Web fonts generated from fontsquirrel. Use this, these will work with cross browser compatibility including Opera.
good luck!
I see in the top of font awesome css this:
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
I just wonder why there are eot, woffm, ttf (svg is for IE), fonts loaded here?
Is for browser compatibility? Or just there are different fonts on each file?
Can I leave safely just one?
You are right, this is for browser compatibility.
You shouldn't care about extra HTTP connections because almost all browsers that support #font-face will only download the first file that matches its supported format (I'm looking at you, oldIE!).
Here's an great post by Paul Irish that extensively explains how #font-face works.
It's my understanding that different browsers/platforms require different font formats, so this is just covering your bases.
I've ran into an issue with font-family; basically I'm doing all the right things (I hope) yet for some reason the font is doing some weird things. So let me explain the issue..
On my browser the font appears OK in chrome/IE yet it doesn't appear in mozilla.
On my dad's laptop, the font doesn't appear what-so-ever in any browser.
On my mates apple mac, the font appears in Safari but not in chrome.
On iPhone the font appears.
On Nexus 4 the font doesn't appear (in Chrome or Mozilla)
This is why I'm confused; Why is it appearing in some browsers on different platforms and not on the others? Can a font be specific to an OS?
Here's the CSS i'm using.
#font-face {
font-family: "Pixelated";
src: url('templates/joostrap/fonts/pixelated.ttf');
}
This is how i'm applying it.
{font-family: "Pixelated"; text-transform: uppercase;}
Any help would be appreciated! cheers!
The most common problem with fonts not showing up is that the path was not properly specified. This happens more when you have multiple file fonts such as: light, bold, medium. So perhaps your path is
src: url('templates/joostrap/fonts/pixelated.ttf');
But if multiple versions are in one directory, it could be
src: url('templates/joostrap/fonts/pixelated/pixelated.ttf');
This happened to me before. In my case I had the fonts.css in my CSS directory, then i had the fonts in assets and the variations of the fonts were in the same directory. In my case I had to implement the Across the Road font. So based on my directory structure I did
#font-face {
font-family: 'across_the_roadregular';
src: url('../assets/fonts/across_the_road/across_the_road-webfont.eot');
src: url('../assets/fonts/across_the_road/across_the_road-webfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/across_the_road/across_the_road-webfont.woff2') format('woff2'),
url('../assets/fonts/across_the_road/across_the_road-webfont.woff') format('woff'),
url('../assets/fonts/across_the_road/across_the_road-webfont.ttf') format('truetype'),
url('../assets/fonts/across_the_road/across_the_road-webfont.svg#across_the_roadregular') format('svg');
font-weight: normal;
font-style: normal;
}
Notice that I specified various file types. This is because not all browsers can display the .ttf format. You can see compatability at http://caniuse.com/#feat=ttf
TTF fonts must be used differently when using in Chrome and Firefox. Check this link to setup the TTF correctly:
ttf files not rendering on Chrome and Firefox
The problem is that you're only using a .ttf file. Not every browser will be able to load it.
Instead you should use a generator (link) so you have a .eot and a .woff file aswell.
Your font CSS will look like this:
#font-face {
font-family: 'Pixelated';
src: url('../fonts/pixelated.eot');
src: url('../fonts/pixelated.eot?#iefix') format('embedded-opentype'),
url('../fonts/pixelated.woff') format('woff'),
url('../fonts/pixelated.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Hope this helped.
Specify a font named "myFirstFont", and specify the URL where it can be found
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
Include a font file somewhere on your server, and refer to it with CSS
src: url('Sansation_Light.ttf')
If the font file is located at a different domain, use a full URL instead
src: url('http://www.w3schools.com/css3/Sansation_Light.ttf')
I think this link helps you http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp