I'm having a problem with font-face and Cyrillic characters. When displayed in any browser on OS X the fonts render properly, but when viewed on a Windows 7 machine (chrome, ie etc), the fonts fail to render.
The fonts have been put through Font Squirrel and the demo that comes with the files also fails.
The font-face css:
#font-face {
font-family: 'open_sansregular';
src: url('opensans-regular-webfont.eot');
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'),
url('opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
Heres a really basic example of my problem. http://joshmahony.com/font_test/opensans-regular-demo.html
Edit: I've updated my link so fonts fallback to times new roman and added some english characters to show that the Cyrillic is falling back.
You have probably generated a version of Open Sans that does not contain Cyrillic characters. Using Google Web Fonts pages, you need to check the relevant checkbox(es) in the user interface. For Russian, I suppose checking “Cyrillic” is enough, “Cyrillic Extended” is not needed.
The choice is to be made on the “Almost done” page, under “2. Choose the character sets you want”.
Related
I installed a moodle font (Coptic) in my Moodle Course and Theme and it displays correctly in Google Chrome. However when I try to view it in Firefox, I.E. or on my Tablet (Chrome via Nexus 9) it doesn't display the correct characters.
I followed these instructions before https://docs.moodle.org/28/en/How_to_add_custom_fonts_in_a_theme. The only thing is, before I only had Coptic.tff and no other font types. I.e. eot or svg. I then went online to get the other fonts. I.e. I uploaded Coptic.tff and got a zip of the other files. By including these other fonts in the dir. do you think it might fix the problem. Thanks for all you help. :-)
Please include all fonts type like you did. Create a new directory in your theme and call it fonts. Then add all your custom fonts into this directory.
eg: moodle/theme/yourtheme/fonts/
Some times " src: url([[font:theme|fontname.eot]]); ", this may not work.
Please add path like this
#font-face { /* where FontName and fontname represents the name of the font you want to add */
font-family: 'fontname';
src: url('../theme/your-theme-name/fonts/fontname.woff');
src: url('../theme/your-theme-name/fonts/fontname.eot') format('embedded-opentype'),
url('../theme/your-theme-name/fonts/fontname.woff') format('woff'),
url('../theme/your-theme-name/fonts/fontname.ttf') format('truetype'),
url('../theme/your-theme-name/fonts/fontname.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Next ADD the name of your font wherever you want that font to be used in your stylesheet.
For example:
#page-header h1 { font-family: FontName;}
try !!! It will work for you :)
#font-face {
font-family: 'Somefont;
src: url('fonts/somefont.eot');
src: url('fonts/somefont.eot?#iefix') format('embedded-opentype'),
url('fonts/somefont.woff') format('woff'),
url('fonts/somefont.ttf') format('truetype'),
url('fonts/somefont.svg#Somefont') format('svg');
font-weight: normal;
font-style: normal;
}
This is the css we usually use for embedding a font on a webpage.
I am a font designer and therefore I know (and have seen) that the curves of ttf are distorted always a bit when the design was converted from an otf font. (I use fontsquirrel Web font generator).
Is there a way to replace the whole ttf file with the otf and is this reliable on all browsers specially webkit?
I made some experiments and found it quite confusing to say which data is actually used by specific browsers.
What I want to achieve is to abolish as much as possible the ttf files in the favor of otf.
Thanks a lot for answers.
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 found this answer here regarding graphic design:
https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend
This is exactly what my fonts are doing, but I'm trying to find out if there's a way to prevent this using html or css or anything web-based.
I'm using "platin" as my font. Do I just need to find a different font?
Any other thoughts on the topic?
If this is caused by using web fonts, I found this SO post (and the accepted answer) helpful: Google webfonts render choppy in Chrome on Windows
My solution was to use the Webfont Generator tool (http://www.fontsquirrel.com/tools/webfont-generator) to convert my font into the variety of web formats and copy their provided CSS into my stylesheet. I was using the Fauna One font from Google, so I had to download it from Google and then upload it into FontSquirrel.
The key is to put the SVG line above TTF, so that Chrome uses it first. Here's what worked for me:
#font-face {
font-family: 'Fauna One';
src: url('fonts/faunaone-regular-webfont.eot');
src: url('fonts/faunaone-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/faunaone-regular-webfont.svg#fauna_oneregular') format('svg'),
url('fonts/faunaone-regular-webfont.woff') format('woff'),
url('fonts/faunaone-regular-webfont.ttf') format('truetype');
}
(This is 99% the same as the CSS file generated by the Webfont Generator, just rearranged a bit).
To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:
#font-face {
font-family: 'Futura';
src: url('futura.eot');
src: url('futura.eot?#iefix') format('embedded-opentype'),
url('futura.woff') format('woff'),
url('futura.ttf') format('truetype'),
url('futura.svg#futura') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'Futura';
src: url('futura.svg#futura') format('svg');
}
}
Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.
Another thing: This trick will cause the browser to download two versions of the font but that's a small price to pay for good looking text!
Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration
<font-face units-per-em="2048" ascent="1900" descent="-510" />
You can change the value for ascent and get it to match the other font format versions.
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