My wordpress website having troble with khmer font showing wrong on ios device.
i'm tried to change font Khmer but it not work. but i use defualt divi theme font i work find.
You need embed Khmer font into your website, you can use Google web font: https://fonts.google.com/?subset=khmer
<link href="https://fonts.googleapis.com/css?family=Battambang&display=swap" rel="stylesheet">
Or include the font and use CSS3 to embed it
I'm a bit late to the party but hope this will help those who finally arrived here.
As #Osify suggested, the best way to have Khmer font displayed correctly on your WordPress website is to use web-fonts, like Google Fonts.
Some Khmer fonts from Google render correctly in the majority of devices and browsers. However, some not.
Some fonts namely, Moul or Nokora will render incorrectly when you browse your WordPress website on Safari of an iPhone 6 or later.
I would recommend you to switch to other fonts like 'Hanuman', 'Battambong', and 'Content' which will fix your problem.
Plus
For speed improvement, I'd suggest hosting those fonts locally as your website asset. A tool like google-webfonts-helper is the best assistant when working with Khmer Fonts.
The tool provides all the needed font files in all formats along with options to choose from and then generates the CSS font-face ready to use.
Related
I added a bit of css (#font-face)script in my Luna theme on Bigcartel. the font works but not in safari and mozilla where do I have to look to get this working in those browsers ?
here is the answer I followed and used the script from:
Can I upload a custom font to big cartel
You need to configure your webserver to allow font files to be loaded from a separate domain - if you check the Network tab in your browser's web inspector you'll likely see an error about it.
There's lots of good info on how to do that here: How to add an Access-Control-Allow-Origin header
In CSS why is a backup font recommended if I am uploading a custom font for use with the webpage?
I thought the backup fonts were only needed in case the client doesn't have the 1st/2nd/3rd..etc choice installed.
For example if you have this code:
#font-face {
font-family: MyCustomFont;
src: url('../fonts/MyCustomFont.ttf');
}
Why is this necessary?
body {
font-family: MyCustomFont, Arial, Helvetica, sans-serif;
}
It's not necessary to specify a font stack, but it helps to degrade gracefully in obscure cases when a browser is unable to use the font somehow, e.g. if the HTTP request for the font file times out, the font file itself becomes corrupted or otherwise unusable, the browser doesn't support any of the given font formats, among others.
You should do your best to ensure the custom font gets downloaded and used properly, of course. But things can and do happen that are out of your control sometimes, so it doesn't hurt to still have something nice to fall back to. That's why they're called backup or fallback fonts :)
DaveRandom, these would be the only nested while loops involved in the business of computing.
I figured out a way to integrate Google Fonts without any of the problems usually found when 3rd party fonts are used.
First off, we know our Google Fonts files are in the .woff format and may not work in all browsers.
Second, if a Google Cloud or some other molest prevents the download of the font file from our server due to cache restrictions or other network limits we know this pseudo-state of connectivity will likely support the .woff fonts from Google Fonts.
To the credit of Google we may be able to load our images in some other way so why not try a Google Fonts version of our end product.. so here is why not:
In order to insure the font remains the same when adding Google Fonts I recommend not removing the self-hosted fonts unless a verified plaintiff requests you do so for rights ownership reasons.
Instead of removing self-hosted fonts which are the true key to real cross-browser compatibility, create a same-font entry in CSS that specifies it's font title as 3rd party such as: 'ArialVanityGoogleFonts'.
Use the browser's built-in font fallback .csv and include the fonts as follows: ArialVanity, ArialVanityGoogleFonts, Arial
I have a social network that allows users to choose fonts for their profiles. It works great on Chrome, Safari and Firefox but IE7-9 does not play well.
What should I change in my font php file to echo some nice css? Here is the code:
$fontovi_style='';
foreach(explode(",", str_replace("\n",'',file_get_contents(ROOT.'media/font-list.txt'))) as $k=>$v){
$ime=str_ireplace('.ttf','',$v);
$fontovi_style.='#font-face {font-family:"'.$ime.'";src: url("/media/fonts/'.$v.'")
format("truetype");}'."\n";
}
echo $fontovi_style;
Internet Explorer does not support TTF, it only supports EOT.
Check this link for further explanation.
This is to some extent a duplicate of this question
I'd just like to make an observations though: Generating this list on the fly for every single page slows down page load plus it puts some extra load on your server (ie it's not cacheable, it makes your pages larger, I/O reading the font list every time, etc)
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
I have no idea why this is happening. I am following the standard tried and tested method of using google web fonts
<link href='http://fonts.googleapis.com/css?family=Sunshiney' rel='stylesheet' type='text/css'>
<style>
h1{ font-family: 'Sunshiney', cursive; }
</style>
<h1>Hi there</h1>
This works in Safari, Chrome and IE but not FF7.
Has anyone come across this. I've also tried using the JS integration and the #import syntax and it is the same. I'm really stuck.
This is a known issue with Google Web Fonts. An internal configuration change broke serving of one of the headers needed for reliable operation in Firefox and IE9+. The fix is propagating now and it should be working soon.
Thanks for reporting the issue!
(I'm an engineer on the Google Web Fonts team, found this in a twitter search trying to investigate how deep the breakage went)
I think its problem with google
On my browser FF 7.01 is show Comics Sans
http://fonts.googleapis.com/css?family=Sunshiney => redirect to
themes.googleusercontent.com/static/fonts/sunshiney/[...]3HZu7kw.woff
And response with no font data
but when type this adress in url bar i can save this font
so.
Just download this font and simple embennded to webpage
Will be faster
eq
====> 0,20second to download family=Sunshiney
=====> 0,30 to download woff font
There is currently an issue on Google's end with the Webfonts. It's odd because they were working just a few days ago, and I've seen them load up once or twice, but otherwise it's reverting to the fallback font.
Your best option is to download the file and manually embed it into your webpage using #font-face. There's a good article on that at Six Revisions.
I hope Google gets it sorted soon.
Just in case it helps someone, I just had a problem with Google Web Fonts not rendering on a colleague's Mac, but working on other (similarly configured) Macs. It was obviously something client side, and turned out to be the browser.display.use_document_fonts setting (see here).
To stop it happening, it's a case of going to Preferences .. Content .. Fonts & Colors .. Advanced and making sure "Allow pages to chose their own fonts, instead of my selections above" is checked.
I just discovered Google Web Font and I was really interested in how this tool could work...
With just a
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
You can use whatever Google has in his fonts collection.
Do you have any idea on how this stuff works ?
It simply returns CSS that includes #font-face rules that allow you to use fonts that are accessible over the web versus on the client's local machine. Note that not all browsers support #font-face.
Choose a font here
http://www.google.com/webfonts#ChoosePlace:select
and select Quick use
When you're on the font page, scroll down a little and you'll have 3 choice to add this font in standard mode, #import or javascript.
This stuff is simply working by loading the #face-font from Google's server without you have to install them on yours. This could result to a faster loading but more you and custom web font, more time it will take to load. So choose wisely.