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

Change css font-family for separate options in select tag

阅读更多关于 Change css font-family for separate options in select tag

I don't know if this is possible, and if not, if someone can throw out optional ideas, but I'm attempting to display a drop down of different fonts (specifically, font's from Google's font directory) in a select tag. In the drop down, I'm trying to show a preview by styling each option with the font it represents <option name="Tangerine" style="font-family:'Tangerine', verdana;">Tangerine</option> This doesn't seem to be working, though. Any clues why or how to fix it? Fakhr Alam You should wrap each option tag in an optgroup tag and then style that as: <select> <optgroup style="font-family

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? 回答1: This question is very wide, And I can only give my 2 - cents regarding one specific

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. 回答1: Ok I found the answer. I am posting it here so it could be helpful for anyone else who's

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!! 回答1: I've had luck in the past using font-weight: lighter!important; on fonts that appear bolder and completely different than what

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? 回答1: I found this answer, which

How to make Google Fonts work in IE?

阅读更多关于 How to make Google Fonts work in IE?

I've been developing a site that uses the Google Fonts API . It's great, and supposedly has been tested in IE, but when testing in IE 8 the fonts simply don't get styled. I included the font, as Google instructs , thus: <link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light" rel="stylesheet" type="text/css" /> and added its name to the front of a font family in CSS thus: body { font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif; font-size: 16px; overflow-y: scroll; overflow-x: hidden; color: #05121F; } Works like a charm in Chrome, Firefox, Safari. No

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

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