Not a complete solution, but you can improve the situation by combining the two requests to one: https://fonts.googleapis.com/css?family=Montserrat|Open+Sans I do that for two fonts on one of my sites and score 86 versus your 14. Importantly, this is a genuine speedup, not just a hack to reduce an arbitrary score.
You can load the web fonts asynchronously with this script: <script> WebFontConfig = { typekit: { id: ‘xxxxxx’ } }; (function(d) { var wf = d.createElement(‘script’), s = d.scripts[0]; wf.src=”https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js”; wf.async = true; s.parentNode.insertBefore(wf, s); })(document); </script> You’ll need this library, it’s pretty easy to implement. I’ve learn this from a course I took recently, … Read more
Please put this code in head section <link href=”https://fonts.googleapis.com/css?family=Lato:400,700″ rel=”stylesheet” type=”text/css”> and use font-family: ‘Lato’, sans-serif; in your css. For example: h1 { font-family: ‘Lato’, sans-serif; font-weight: 400; } Or you can use manually also Generate .ttf font from fontSquiral and can try this option @font-face { font-family: “Lato”; src: url(‘698242188-Lato-Bla.eot’); src: url(‘698242188-Lato-Bla.eot?#iefix’) format(’embedded-opentype’), url(‘698242188-Lato-Bla.svg#Lato … Read more
There are two things to fix here: Use https for the Google fonts link (https://fonts.googleapis.com/css?family=Whatever) Authorize https://fonts.googleapis.com in style-src directive and https://fonts.gstatic.com in font-src directive: “style-src ‘self’ https://fonts.googleapis.com; font-src ‘self’ https://fonts.gstatic.com”
To convert HTML to PDF by wkhtmltopdf try to avoid woff font face. Use the truetype format of the Google Web Fonts with base64 encode. Recently I tried to use a Google web font from Google Web Fonts. In the browser it shows correctly but it doesn’t show after converting HTML to PDF. After searching … Read more
Unfortunately Google does not offer an easy way to directly download fonts. You can browse the git repository 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 … Read more
In some sort of main or first loading CSS file, just do: @import url(‘https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext’); You don’t need to wrap in any sort of @font-face, etc. the response you get back from Google’s API is ready to go and lets you use font families like normal. Then in your main React app JavaScript, at the top … Read more
URL encode the | (pipe characters) in the href attribute (%7C): <link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic%7CPT+Serif:400,400italic%7CBree+Serif”>
Please keep in mind that my answer has aged a lot. There are other more technically sophisticated answers below, e.g.: neverpanic/google-font-download google-webfont-helper localfont so don’t let the fact that this is the currently accepted answer give you the impression that this is still the best one. You can also now also download google’s entire font … Read more