If I load simple Roboto font with 300 weight, Google loads so many font in it, please have a look at this
https://fonts.googleapis.com/css?family=Roboto:300
It loads all:
cyrillic-ext, cyrillic, greek-ext, greek etc..
Is this normal behavior ? how can I avoid this as if I load 3 fonts, it will be loading 18 and this is serious speed issue.
According to this, actually, it only loads it all when you visit that page with a browser. If you curl that address changing the parameter you'll see the difference.
Related
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.
I'm using Open Sans on my site, and I'm noticing from the handy colored dial on Google Web Fonts, that if I want the light, italic, semi bold, bold, and other styles, that it becomes quite a heavy download for the end user.
Is this really a problem with a font as popular as Open Sans? Do browsers download Open Sans all over again every time a website has their own file listed in an #font-face declaration?
Am I incurring expensive HTTP requests, or am I just adding what is missing? So that if a browser already has Open Sans Regular, Italic, and Bold (and bold italic), they're only grabbing Light and Semi Bold from me?
Preemptive Update I've used the local() expression in my #font-face declaration, and it's given me real bad problems with italic styling, it basically ignores it.
Unless you use local(), which you say you have problems with and which is prone to users having different font files than the one you assume they have, font files are just like any other resource (scripts, images, style-sheets).
They will get cached by browsers, depending on user preferences - this meaning they only get downloaded once and used from cache from that point on, until the cache expires or gets cleaned.
If you define a #font-face and specify font files for it, the first format the browser understands from the list of font file formats you list will be downloaded and used. That's why you normally list the lightest formats first and the heaviest last: (woff2 > woff > ttf > svg).
Please note that if you serve the font files from your server browsers will never use the font-files from, let's say Google, even if they are exactly the same. This gives you the option to serve modified font-files. But if you use font-files from Google, users might already have them cached, and they will be used if they had the exact same download link (same weights, same variants).
I've been using the same google fonts in development for a couple of months by now and today they just stopped to load in Chrome (works fine in FF).
I have the following line in my scss file:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=cyrillic,latin);
and I have the following requests in Chrome Network tab that return 404
Request URL:http://fonts.gstatic.com/s/opensans/v10/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2
Request URL:http://fonts.gstatic.com/s/opensans/v10/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2
Request URL:http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzJX5f-9o1vgP2EXwfjgl7AY.woff2
Also it's worth pointing out that the requests' paths are different for FF and Chrome
Any idea what might've caused google fonts stop to work? I update my ubuntu everytime it offers updates, is there a chance it has to do something with ubuntu update?
PS if I simply open link that I use for the #import, it shows me font-faces for all the types there are for this font, instead of just the three I need, and again, it shows me only 3 in FF
See https://github.com/google/fonts/issues/14. Chrome users of Google Fonts for non-latin scripts for Open Sans were temporarily impacted.
Font Source url > http://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=cyrillic,latin
This looks like an issue with Google fonts, as when I point to /* latin */ http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2 it prompts me a file dialog to save.
Where as while pointing to /* cyrillic-ext */ http://fonts.gstatic.com/s/opensans/v10/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2 throws an error.
So it looks like font type is missing on the google server.
Google generates wrong URL's for some 'fonts.gstatic.com' fonts at the moment. This is Chrome specific issue only. The kernel of problem is wrong 'v10' part of URLs generated by Google.
I have discovered the problem for "Open Sans" font only.
For example, http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,600,700&subset=cyrillic,latin at the moment gives wrong URL for:
/* latin-ext */ "Open Sans", 300 font (add http:// before, as I can't add more than 2 links now as novice):
fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTT0LW-43aMEzIO6XUTLjad8.woff2
At the same time if you'll try to download same font with changed URL ('v10' with 'v11' replaced) using Chrome - the font will be downloaded without any problems. Just try the font link above with 'v10' to 'v11' replaced:
http://fonts.gstatic.com/s/opensans/v11/DXI1ORHCpsQm3Vp6mXoaTT0LW-43aMEzIO6XUTLjad8.woff2
I've changed my fonts in the server, but the browser get the old version of the css file where fonts are writed, how to reset the cache?, i've tried to delete browser cache and delete the old file css, but they still are getting the old cs, i've tried to reload the server, how to fix that?
I've noticed this happen only in Firefox, which is very annoying, however, if this is the same situation as you here, refresh with SHIFT + CMD + R (if you're on a mac, I presume the windows alternative is CTRL + SHIFT + R)
That'll clear your cache for that page too + SHOULD show your fonts :)
Make sure your browser isn't displaying local fonts — I spent almost one hour trying to figure out how to clear the font cache in Firefox, while the issue had nothing to do with that.
Check your webserver logs : are font files downloaded ? If not, then it's likely you're using local fonts.
Consider this real case scenario :
#font-face{
font-family: SuperFont;
src: url('../fonts/Superfont.ttf'),
}
I copypasted this code from somewhere, removing part of the src definition, not noticing the ending comma which made this line invalid CSS. Therefore the font was not downloaded.
However, since I had Superfont already installed locally, it seemed to work because the browser recognized the font-family. Well, until I decided to change the font file, but keeping the font-family definition to spare further modifications of the CSS file…
Morality : when testing fonts, use an unambiguous custom font-family name.
Have you tried viewing the page in a different browser to ensure the old font isn't still being added to the page?
If you're still using the same CSS file, you can navigate to the CSS file and do a hard refresh on that Ctrl+F5.
Also, I've found that closing the page completely before clearing your cache can help too!
Do a : Ctrl + F5 on your browser
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.