Unfortunately Google does not offer an easy way to directly download fonts. You can browse the [git repository][1] to search for the file you want, though there are only TTF files on GitHub available.

Also, do not directly link to the GitHub hosted fonts in your CSS! GitHub serves the files with the wrong mime type, which causes issues in some browsers.

While there is not a mainstream CDN for all the formats, you can use http://google-webfonts-helper.herokuapp.com to download the font files and host them yourselves.


  [1]: https://github.com/google/fonts/

When I open the following URL in Chrome, I get a link to the font in `woff2` format. When I use Firefox, it&#39;s in `woff` format and in an Android device running pre-4.4, it is in `ttf` format.

http://fonts.googleapis.com/css?family=Open+Sans

So it appears that Google delivers fonts in a format appropriate to the requesting user-agent.

Another option is using the following ([node][1]) [gulp][2] package: [gulp-google-webfonts][3].

Once installed it takes moments to install fonts and create corresponding css.

Note that when installing a Google Font with whitespace in the name, (you don&#39;t escape it) reference it with the plus sign as follows:


fonts.list
    
    Cabin+Sketch:400


  [1]: https://nodejs.org/download/
  [2]: http://gulpjs.com/
  [3]: https://www.npmjs.com/package/gulp-google-webfonts

You can use [everythingfonts.com][1] to convert the `ttf` file to a `woff` file.


  [1]: https://everythingfonts.com/ttf-to-woff &quot;everythingfonts.com&quot;

I&#39;m using [DynamoDB local][1] for unit testing. It&#39;s not bad, but has some drawbacks. Specifically:

* You have to somehow start the server before your tests run
* The server isn&#39;t started and stopped before each test so tests become inter-dependent unless you add code to delete all tables, etc. after each test
* All developers need to have it installed

What I want to do is something like put the DynamoDB local jar, and the other jars upon which it depends, in my `test/resources` directory (I&#39;m writing in Java). Then before each test I&#39;d start it up, running with `-inMemory`, and after the test I&#39;d stop it. That way anyone pulling down the git repo gets a copy of everything they need to run the tests and each test is independent of the others.

I have found a way to make this work, but it&#39;s ugly, so I&#39;m looking for alternatives. The solution I have is to put a .zip file of the DynamoDB local stuff in `test/resources`, then in the `@Before` method, I&#39;d extract it to some temporary directory and start a new java process to execute it. That works, but it&#39;s ugly and has some drawbacks:

* Everyone needs the java executable on their `$PATH`
* I have to unpack a zip to the local disk. Using local disk is often dicey for testing, especially with continuous builds and such.
* I have to spawn a process and wait for it to start for each unit test, and then kill that process after each test. Besides being slow, the potential for left-over processes seems ugly.

It seems like there should be an easier way. DynamoDB Local is, after all, just Java code. Can&#39;t I somehow ask the JVM to fork itself and look inside the resources to build a classpath? Or, even better, can&#39;t I just call the `main` method of DynamoDB Local from some other thread so this all happens in a single process? Any ideas?

PS: I am aware of Alternator, but it appears to have other drawbacks so I&#39;m inclined to stick with Amazon&#39;s supported solution if I can make it work.


  [1]: http://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Tools.DynamoDBLocal.html

Easier DynamoDB local testing

I want each row in column B to be `f( column A)`, so that `b[n]=f(a[n])`. I could go row by row and apply the formula, but is there an easy way to just drag the formula down and have it increment the cells it&#39;s referencing automatically?


Quickest way to apply a formula to an entire column?

Google Fonts seems to only offer fonts in WOFF2.

While this works fine with Chrome, [WOFF2 doesn&#39;t seem to be supported by many other browsers][1]

Is there a way to directly link to Google fonts hosted on their CDN in a format other than WOFF2?


  [1]: http://caniuse.com/#feat=woff2

How can I download WOFF files from Google Fonts?

Google Fonts seems to only offer fonts in WOFF2.
While this works fine with Chrome, <a href="http://caniuse.com/#feat=woff2" target="_blank" rel="noopener noreferrer">WOFF2 doesn't seem to be supported by many other browsers</a>
Is there a way to directly link to Google fonts hosted on their CDN in a format other than WOFF2?

I&#39;m aware that you can specify styles within React classes, like this:

    const MyDiv = React.createClass({
      render: function() {
        const style = {
          color: &#39;white&#39;,
          fontSize: 200
        };
        
        return &lt;div style={style}&gt; Have a good and productive day! &lt;/div&gt;;
      }
    });

Should I be aiming to do all styling this way, and have no styles at all specified in my CSS file?

Or should I avoid inline styles completely?

It seems odd and messy to do a little bit of both - two places would need to be checked when tweaking styling. 

React.js inline style best practices

For some reason device emulation mode is not reading my media queries. It works on other sites including my own sites that I made with bootstrap, but it&#39;s not working on media queries I am using from scratch (clicking the media queries button turns the button blue but no media queries are displayed). Test file below. Is this a bug in Chrome or is there something I need to change in my file?


    &lt;!DOCTYPE html&gt;
    &lt;!--
	Media Queries Example 1
	Sam Scott, Fall 2014
    --&gt;
    &lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;MQ Example 1&lt;/title&gt;
		&lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
		&lt;style&gt;
			body { font-family: sans-serif; }
			h1 { color: red; } 
			h2 { color:blue; }
			p { color:green; }
			
			@media (max-width: 768px) and (min-width: 481px) {
				h1 { color: green; } 
				h2 { color:red; }
				p { color:blue; }
			}
			
			@media (max-width:479px), print { 
				h1,h2,p { color:black; }
			}
			
			@media print {
				body { font-family: serif; }
			}
			

		&lt;/style&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;h1&gt;I&#39;m a first level heading&lt;/h1&gt;
		&lt;p&gt;I&#39;m a paragraph.&lt;/p&gt;
		&lt;h2&gt;I&#39;m a second level heading&lt;/h2&gt;
		&lt;p&gt;I&#39;m another paragraph.&lt;/p&gt;
	&lt;/body&gt;
    &lt;/html&gt;

Chrome Device Mode Emulation Media Queries Not Working

I&#39;m getting this error in Chrome when it loads this application I am working on:

&gt;Failed to get text for stylesheet 50: No style sheet with given id found

Subsequent page loads repeat the error, but with a different number:

&gt;Failed to get text for stylesheet 152: No style sheet with given id found

This only happens in Chrome, and only with this application.  There is no stack trace, reference, or any other information about what id is given, what the stylesheet in question is, or what is causing this generally.  How can I find what is causing this error and fix it?


  [1]: http://i.stack.imgur.com/kkjTn.png
  [2]: http://i.stack.imgur.com/ecTFY.png

Error shows &quot;Failed to get text for stylesheet (#): No style sheet with given id found&quot;, what does this mean?

I found CSS `will-change`&lt;sup&gt;[W3.org docs](http://dev.w3.org/csswg/css-will-change/), [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)&lt;/sup&gt; property (which already works in Chrome and is partiali supported by Firefox and Opera) but I&#39;m not really sure how it works.
Does anybody know something more about this mysterious thing?

I have just read that it allows browser to prepare for calculation over the element in the future.
I don&#39;t want to misunderstand it. So I have a few questions.

1. Should I add this property to the element class or its hover state?


        .my-class{
            will-change: &#39;opacity, transform&#39;
        }
        .my-class:hover{
            opacity: 0.5
        }
        .my-class:active{
            transform: rotate(5deg);
        }


   OR
       
        .my-class{
            ...
        }
        .my-class:hover{
            will-change: &#39;opacity&#39;
            opacity: 0.5
        }
        .my-class:active{
            will-change: &#39;transform&#39;
            transform: rotate(5deg);
        }

2. How can it increase a browser performance? Theoretically, when CSS is loaded, the browser already &quot;knows&quot; what will happen with each element, doesn&#39;t it?

If you can add any good example illustrating how to use it efficiently, I will be grateful :)

How to use and how works CSS&#39; will-change property?

This is a hypothetical example:


&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    table, thead, tbody, tr { width: 100%; }
        table { table-layout: fixed }
        table &gt; thead &gt; tr &gt; th { width: auto; }

&lt;!-- language: lang-html --&gt;

    &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Column A&lt;/th&gt;
              &lt;th&gt;Column B&lt;/th&gt;
              &lt;th&gt;Column C&lt;/th&gt;
              &lt;th class=&quot;absorbing-column&quot;&gt;Column D&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;Data A.1 lorem&lt;/td&gt;
              &lt;td&gt;Data B.1 ip&lt;/td&gt;
              &lt;td&gt;Data C.1 sum l&lt;/td&gt;
              &lt;td&gt;Data D.1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Data A.2 ipsum&lt;/td&gt;
              &lt;td&gt;Data B.2 lorem&lt;/td&gt;
              &lt;td&gt;Data C.2 some data&lt;/td&gt;
              &lt;td&gt;Data D.2 a long line of text that is long&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Data A.3&lt;/td&gt;
              &lt;td&gt;Data B.3&lt;/td&gt;
              &lt;td&gt;Data C.3&lt;/td&gt;
              &lt;td&gt;Data D.3&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;

&lt;!-- end snippet --&gt;


I want to have every single column&#39;s width to fit its content size, and leave the rest of the space for the one column with the &quot;absorbing-column&quot; class, so that it looks like this:

    | HTML                                                                   | 100%
    | body                                                                   | 100%
    | table                                                                  | 100%
    |------------------------------------------------------------------------|
    | Column A | Column B       | Column C | Column D                        |
    |------------------------------------------------------------------------|
    | Column A | Column B lorem | Column C | Column D                        |
    | Column A | Column B       | Column C | Column D                        |
    | Column A | Column B       | Column C | Column D                        |
    |------------------------------------------------------------------------|

You see, Column B is a bit bigger than the rest due to the extra data in the first row, but Column D always uses up the remaining space.

I played around with max-width, min-width, auto, etc. and could not figure out how to make this work.

In other words, I want all columns to take whatever width they need and not more, and then I want Column D to use up all of the remaining space inside the 100% width table.

How to get the &lt;td&gt; in HTML tables to fit content, and let a specific &lt;td&gt; fill in the rest

Today I updated [Font Awesome][1] package to 4.3.0 and noticed that **woff2** font was added. That file is linked in CSS so I need to configure nginx to serve woff2 files properly.

Currently I have this block in nginx config for fonts:

    location ~* \.(otf|eot|woff|ttf)$ {
        types     {font/opentype otf;}
        types     {application/vnd.ms-fontobject eot;}
        types     {font/truetype ttf;}
        types     {application/font-woff woff;}
    }

What is proper mime type for woff2 fonts?

  [1]: http://fortawesome.github.io/Font-Awesome/

Proper MIME type for .woff2 fonts

I have to import the Klavika font and I&#39;ve received it in multiple shapes and sizes:

    Klavika-Bold-Italic.otf
    Klavika-Bold.otf
    Klavika-Light-Italic.otf
    Klavika-Light.otf
    Klavika-Medium-Italic.otf
    Klavika-Medium.otf
    Klavika-Regular-Italic.otf
    Klavika-Regular.otf
Now I would like to know if it&#39;s possible to import those into CSS with just one `@font-face`-query, where I&#39;m defining the `weight` in the query. I want to avoid copy/pasting the query 8 times.

So something like:

    @font-face {
      font-family: &#39;Klavika&#39;;
      src: url(../fonts/Klavika-Regular.otf), weight:normal;
      src: url(../fonts/Klavika-Bold.otf), weight:bold;
    }

Multiple font-weights, one @font-face query

I do not know what is going on but in the browser console I can see 3 errors related to font-awesome

     GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 
     GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff?v=4.3.0
     GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.ttf?v=4.3.0 

I know it is ridiculous I can not figure out this by myself, but everything seems to be OK, in my index.html I have something like this

    &lt;link rel=&quot;stylesheet&quot; href=&quot;bower_components/font-awesome/css/font-awesome.css&quot; /&gt;

and that&#39;s all I have related to the font-awesome thing, I already check the path and I am not wrong with that.

Is this happening with any of you guys ?

![enter image description here][1]


  [1]: http://i.stack.imgur.com/X0ylj.png


**UPDATE**

this is the NGINX part where I load some content in the headers

    add_header Content-Security-Policy &quot;style-src &#39;self&#39; &#39;unsafe-inline&#39;
    https://fonts.googleapis.com
    https://fonts.gstatic.com
    https://themes.googleusercontent.com
    https://assets.zendesk.com;
    font-src &#39;self&#39; https://themes.googleusercontent.com
    https://fonts.gstatic.com;&quot;;

Font-Awesome error 404 on fonts

[This exception occurs in here.][1] You can reproduce it in IE11. So far I have not found the cause of the issue. Any ideas why this is being caused?

![enter image description here][2]

&gt; CSS3114: @font-face failed OpenType embedding permission check.
&gt; Permission must be Installable. File:
&gt; 53d9eae5-63b4-48d7-a5b8-3419455028bb.ttf

The web site is running on Azure Websites platform and is using ASP.NET MVC 5.


  [1]: http://itmcup-stg.azurewebsites.net/
  [2]: http://i.stack.imgur.com/jpmqs.png

@font-face failed OpenType embedding permission check. Permission must be Installable

This is an error I am getting in Chrome and unfortunately searching for it hasn&#39;t given me much results. The font itself is appearing correctly. However I still get this error/warning. More specifically, this is the full warning:

&gt; &quot;Failed to decode downloaded font:
&gt; http://localhost:8000/app/fonts/Lato/&quot;

My CSS are these:

  

    @font-face {
        font-family:&quot;Lato&quot;;
        src: url(&quot;../fonts/Lato/&quot;);
    }
    
    html, body {
        font-family:&#39;Lato&#39;;
    }

I just do not understand. The font is applied correctly, but the warning is always there. Trying to use `Sans-Serif` makes the font revert to the normal browser font, so that may be it, but I am not sure, and even after searching I have found nothing. Thanks!

EDIT

There are various font files, all from the same family. I am trying to load them all. The font files are `.ttf`. I am loading them from a local folder, and there are various font-files, like `Lato-Black.ttf`, `Lato-Bold.ttf`, `Lato-Italic.ttf` etc.

Failed to decode downloaded font

For a map-like tool, I would like to **disable the browser zooming feature**. *(I know that this is generally a bad idea, but for some specific website, it is needed).*


I did it successfully by listening the keyboard shortcut &lt;kbd&gt;CTRL&lt;/kbd&gt; &lt;kbd&gt;+&lt;/kbd&gt; / &lt;kbd&gt;CTRL&lt;/kbd&gt; &lt;kbd&gt;-&lt;/kbd&gt; and adding `e.preventDefault()`, etc. 
*But this doesn&#39;t prevent from changing the zoom from the browser&#39;s Zoom menu.*

I tried:

* with CSS:  `zoom: reset;`  It works for Chrome (see [this page for a working example][1]) but it doesn&#39;t work at all on Firefox.

* in various questions/answers, I also found 

    `&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;` 

  but this seems to work for mobile only.

___

**How to prevent zooming cross-browser ?**


  [1]: http://gget.it/eionjtdo/disable_zoom.html

Prevent zoom cross-browser

Any alternatives in pure javascript?

The following works in opera, chrome and safari. Have not tested yet on explorer:

&lt;http://monkey-me.herokuapp.com&gt;

&lt;https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js&gt;

At page load should scroll down to div &#39;.content&#39;:

    var destiny = document.getElementsByClassName(&#39;content&#39;);
    var destinyY = destiny[0].offsetTop;
    scrollTo(document.body, destinyY, 200);
    
    function scrollTo(element, to, duration) {
        if (duration &lt;= 0) return;
        var difference = to - element.scrollTop;
        var perTick = difference / duration * 2;
        
        setTimeout(function() {
            element.scrollTop = element.scrollTop + perTick;
            scrollTo(element, to, duration - 2);
        }, 10);
    };



document.body.scrollTop Firefox returns 0 : ONLY JS

Currently the HTML5 `&lt;datalist&gt;` element is supported in most major browsers (except Safari) and seems like an interesting way to add suggestions to an input.

However, there seem to be some discrepancies between the implementation of the `value` attribute and the inner text on the `&lt;option&gt;`. For example:

    &lt;input list=&quot;answers&quot; name=&quot;answer&quot;&gt;
    &lt;datalist id=&quot;answers&quot;&gt;
      &lt;option value=&quot;42&quot;&gt;The answer&lt;/option&gt;
    &lt;/datalist&gt;

This is handled differently by different browsers:

Chrome and Opera:&lt;br&gt;
![Datalist in Chrome/Opera][1]

FireFox and IE 11:&lt;br&gt;
![Datalist in FireFox][2]

After selecting one, the input is filled with the value and not the inner text. I only want the user to see the text (&quot;The answer&quot;) in the dropdown and in the input, but pass the value `42` on submit, like a `select` would.

How can I make all browsers have the dropdown list show the labels (inner text) of the `&lt;option&gt;`s, but send the `value` attribute when the form is submitted? 


  [1]: http://i.stack.imgur.com/3kdQd.png
  [2]: http://i.stack.imgur.com/qtir4.png

Show datalist labels but submit the actual value

I have a simple object like the one below:

    var countries = {
        &quot;Argentina&quot;:1,
        &quot;Canada&quot;:2,
        &quot;Egypt&quot;:1,
    };

I need to create two arrays. The first array is an array of all the keys from the object. I created this array by: 

    var labels = Object.keys(countries);

This works well. I obtain an array of countries. Now when I try to create an array from the values...

    var labels = Object.values(countries);

I get this error: `Uncaught TypeError: Object.values is not a function JavaScript`

I don&#39;t know what I am doing wrong. I `console.log countries` before and after I declare `labels` and the object remains the same. How do I properly use `Object.values()`?

Uncaught TypeError: Object.values is not a function JavaScript

I&#39;m trying to use Google Fonts and I&#39;ve never had any problems, but now when I try to add the CSS file on my header I get this error on the console: 

Refused to load the stylesheet `&#39;http://fonts.googleapis.com/css?family=Whatever&#39;` because it violates the following Content Security Policy directive: `&quot;style-src &#39;self&#39; &#39;unsafe-inline&#39;&quot;`.

Google Fonts violates Content Security Policy

I had built a website with *React.js* and *webpack*.

I want to use *Google fonts* in the webpage, so I put the link in the &lt;head&gt; section.

##[Google Fonts][1]

    &lt;link href=&quot;https://fonts.googleapis.com/css?family=Bungee+Inline&quot; rel=&quot;stylesheet&quot;&gt;



###And set CSS 

    body{
        font-family: &#39;Bungee Inline&#39;, cursive;
    }


However, it does not work.

How can I solve this problem?


  [1]: https://fonts.google.com/specimen/Bungee+Inline?selection.family=Bungee%20Inline

Content Type	Original Author	Original Content on Stackoverflow
Question	cantsay	View Question on Stackoverflow
Solution 1 - Css	udondan	View Answer on Stackoverflow
Solution 2 - Css	Dheeraj Vepakomma	View Answer on Stackoverflow
Solution 3 - Css	MikeiLL	View Answer on Stackoverflow
Solution 4 - Css	isapir	View Answer on Stackoverflow

How can I download WOFF files from Google Fonts?

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Solution 4 - Css

Quickest way to apply a formula to an entire column?

Easier DynamoDB local testing

Attributions