google-webfonts | 易学教程

How to download multiple formats of a web font from the (official) Google Web Fonts repo?

阅读更多关于 How to download multiple formats of a web font from the (official) Google Web Fonts repo?

I've learnt that Google automatically serves TTF , EOT , WOFF , or SVG font files depending on the browser / device it's accessed from. Now I am planning to host and serve the font files from my server itself, for which I would first have to download all the file formats of the web font(s). How or where can I download the 4 file formats for a web font that I would like to use? PS: By using different browsers -- Chrome, IE9 and Safari (dev - iPhone UA), I was able to get the WOFF, EOT and TTF formats. No luck with the SVG format though. It would be awesome if there's an even simpler way. EDIT:

Is 'Google Web Fonts' or CDN bad?

阅读更多关于 Is 'Google Web Fonts' or CDN bad?

I worked on a Project recently; and upon starting one of the first things mentioned was to NOT use google CDN nor google web fonts -- there wasn't an explanation. I have always used CDNs and Google Web Fonts as opposed to font-face; is there any concerns with these google developer options? What could be troublesome? Is it better practice to use raw sources (EG. Directly from jQuery website) or font-face? Obmerk Kronen This question is very wide, And I can only give my 2 - cents regarding one specific problem. As long as you are in the US - there is usually no problem ( speed, or otherwise )

How can I add(programatically) google fonts to ckeditor

阅读更多关于 How can I add(programatically) google fonts to ckeditor

I have just download CKEditor and its great. Although I have noticed that it slacks fonts. So I thought it would be a good idea to be able to add Google Web Fonts to CKEditor to add to its functionality. I have searched online but I could only find how to manually go in and add each font in config.js file. Can someone please help me add all Google Web Fonts to CKEditor programatically and show how. Ok I found the answer. I am posting it here so it could be helpful for anyone else who's looking for the same. So here it is: myFonts = ['Aclonica', 'Allan', 'Allerta', 'Allerta Stencil', 'Amaranth'

Open Sans Google Web Fonts Rendering in Chrome

阅读更多关于 Open Sans Google Web Fonts Rendering in Chrome

I've noticed a significant difference in rending of Open Sans (Google Web Font) from Chrome, to Safari/Firefox. I attach two photos, the first being chrome and the second safari. All I have in the stylesheet is: font-family: 'Open Sans', sans-serif; font-size:14px; Hope you can help, as I really like the chrome (first image) rendering but HATE the other one!! I've had luck in the past using font-weight: lighter!important; on fonts that appear bolder and completely different than what they are intended to look like. Each browser interprets fonts differently. Google Web Fonts tries its best to

Google Web Fonts don't work in IE8

阅读更多关于 Google Web Fonts don't work in IE8

IE9 - CSS3111: @font-face encountered unknown error

阅读更多关于 IE9 - CSS3111: @font-face encountered unknown error

I embed three Google Fonts from http://www.google.com/webfonts (Dosis, Open Sans, Lato) And they all work fine except IE9 where it returns: CSS3111: @font-face encountered unknown error. 2HG_tEPiQ4Z6795cGfdivPY6323mHUZFJMgTvxaG2iE.eot CSS3111: @font-face encountered unknown error. KlmP_Vc2zOZBldw8AfXD5g.eot CSS3111: @font-face encountered unknown error. zLhfkPOm_5ykmdm-wXaiuw.eot And breaks entire website occasionally. What can be done to resolve this? I found this answer, which addresses the question more directly than the accepted answer, which really, shouldn't have been the answer :) And

google fonts + webpack

阅读更多关于 google fonts + webpack

I am new to webpack 2.2 ; I would like to know the best way to integrate a Google font within my project. I am using the Webpack HTML plugin to generate an index.html from a template. So for the moment I hard-coded the Google font CSS directly in a <script> tag but I do not really like this 'solution' since it does not really use webpack at all: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel="stylesheet"> <body> <div id='app'/> </body> </html> There is no need to use SASS. You will either need to use

Converting and rendering web fonts to base64 - keep original look

阅读更多关于 Converting and rendering web fonts to base64 - keep original look

I want to defer font loading on my site inspired by deferred font loading logic for Smashing Magazine . Main part of this is converting fonts to base64 and preparing your CSS file. My steps so far: Pick fonts on Google Web Fonts and download them. Use Font Squirrel Webfont Generator to convert downloaded TTF files to CSS file with base64 embedded WOFF fonts (Expert options -> CSS -> Base64 Encode). Load CSS file async (not important here). CSS snippet for Open Sans Bold: @font-face { font-family: 'Open Sans'; src: url(data:application/x-font-woff;charset=utf-8;base64,<base64_encoded>) format(

Google webfonts render choppy in Chrome on Windows

阅读更多关于 Google webfonts render choppy in Chrome on Windows

I use the Google Webfonts service on my website and rely heavily on it. It renders fine on most browsers, but in Chrome on Windows it renders especially bad. Very choppy and pixelated. What i have found out so far is that Chrome requires the .svg format font to be loaded first. The font i am using however, called Asap, was only available in .woff. I converted it to .svg using a free online service, but when i added that to my stylesheet (before the .woff), it didn't change anything. I've also tried: -webkit-font-smoothing: antialiased; text-shadow: 0px 0px 0px; Hoping that either would help

Google Webfont conflict with local font

阅读更多关于 Google Webfont conflict with local font

I have a really bad conflict with using google-webfonts. OK here is the code: This is in head: <link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'> And this is in the css-file: body { font-family: 'Oswald', sans-serif; font-weight: 700; } " Oswald " is a font-family of 3 fonts: book (300) normal (400) bold (700) As you can see.. i've loaded only the bold-face (700). (you can see it in the query) And it works till here BUT … THE PROBLEM IS: I have a desktop-version of the 3 fonts (300,400,700) installed on my computer and as long as these fonts are