google-font-api

问题 I am using google webfonts and have come accross an issue with jagged and choppy font rendering in FF and chrome (IE11 renders them better). Example can be found here: http://jsfiddle.net/PNYfR/ <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Exo:300,400,700&subset=latin"> <p style="font-family: 'Exo', serif; font-weight: 400; font-style:normal; font-size:31px; color:white; background-color: #0085B2; line-heigth:1.42857; padding:100px"> Open Sans is a

问题 Is there a way to use a google font and have it load only [A-Z] and the & ampersand character? I would like to do this to reduce size and improve load time, since I will only use basic latin numbers and letters. I can host the font myself if I must and it is legal to manipulate the font package, but am not sure if self-hosting is necessary and how to manipulate google's font package. I have specified A-Z like this: http://fonts.googleapis.com/css?family=Inconsolata&text

问题 For a project, I have to use many style off a font. Here is the link of the google font Here is my css import @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700); What I would like to know is how can I define the font-family to display for example the "Open Sans Light 300 Italic" Thanks 回答1: CSS @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700); body { font-family: 'Open Sans', sans-serif

问题 I'm trying to change h1 to font-weight: 300 . Except when I did: .h1{ font-weight: 300; } Nothing happened! So to test the font weight on other text elements, I set the entire encapsulating container, container-fluid , to a font-weight: 200 : .container-fluid{ font-family: 'Work Sans', sans-serif; font-weight: 200; } ...And only a couple elements changed their font-weight (see here: JFiddle). The rest stayed the same. Why is this happening? If someone could show me how to change the font

问题 I'm working on making my site look the same under Safari and Chrome. In Chrome it looks exactly how I want it to. The major problem is that Google Font doesn't seem to be loading under Safari. Because I'm using the exact code given on the Google Font site, I can't understand why Safari won't fetch it. Is it just incompatible with Safari and I have to rely on a fallback font? The site can be found here 回答1: For some odd reason I have experience this on some web fonts from Google...when this

问题 Link: https://50.62.213.246/gktest/ The placeholder text and input text in the search bar will not respond to font-weight: 300; If I try font-weight: 700; the text is bold. normal = 400, light = 300, bold = 700, etc So my question is why does the text not appear light with font-weight: 300; ? 回答1: Your link uses the https protocol. http vs https - for a protocol agnostic reference, use //fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700|Roboto:400,300,700,500,100 Basically your

问题 As google fonts are blocked in China I had to download them and use FontSquirrel for conversion. The problem: fi/ff/etc are ugly I did all of the steps here Prevent ligatures in Safari (Mavericks/iOS7) via CSS but no cigar. How can I disable ligatures at once? -webkit-font-variant-ligatures: no-common-ligatures; Doesn't work 回答1: Despite no-common-ligatures you can try values like none , unset or no-contextual . See MDN for all possible values. Also it should be supported in all modern

问题 Is it possible to define a custom name for Google fonts? Eg. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> How to use 'Open Sans' with custom name? div { font-family: 'custom'; // to be same as 'Open Sans' } Using @font-face as answered here is not possible, since I don't have url to source files (ttf, eot, woff, ...). Links to source files on Google cdn would solve this issue. 回答1: This code will work in your case: <style type="text/css">

问题 So I am using the fonts this way <link href='http://fonts.googleapis.com/css?family=Fira+Sans:700|Open+Sans&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20' rel='stylesheet' type='text/css' /> <style>h1, h2, h3 {font-family: 'Fira Sans', sans-serif; line-height:1.125em} </style> This is the result... I am completely confused as how this can even happen? What am I doing wrong. The issue seems only on the home computer. Rest everywhere I checked its fine. Home PC: Firefox

问题 I have a series of font values like this (Command separated one line): Yeseva+One, Yrsa, ... I'm looking for a SED (Or other bash tool expression) for turn each value into line statements like this: --font-yeseva-one: "Yeseva One"; --font-yrsa: "Yrsa"; Thoughts? Update Just wanted to say thanks for all the great help with this and if anyone needs google fonts as CSS variables / properties they are all available here (MIT License): https://github.com/superfly-css/superfly-css-variables-fonts