Check out the WebFont.load command in this github repo: https://github.com/typekit/webfontloader You can load whatever font you want dynamically: <script src=”http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js”></script> <script> WebFont.load({ google: { families: [‘Droid Sans’, ‘Droid Serif’] } }); </script>
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
The trick lies with this optimization: unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; With this, the browser knows whether it needs to download the font, depending on the characters it just loaded in the html. Chrome is currently the only one with full support for this. MDN lists Firefox 36+ as completely ignoring this spec, therefore Google … Read more
Your CSS should not only contain font-family: ‘Source Sans Pro’, sans-serif; it should also have values for FONT-STYLE and FONT-WEIGHT: font-family: ‘Source Sans Pro’, sans-serif; font-weight: 900; font-style: italic; in case you use a font that contains those values like for example: https://fonts.googleapis.com/css?family=Source+Sans+Pro:900italic
If you are on a Mac just open up the ‘Font Book’ app and disable the font.
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=”http://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