Guest Posted December 7, 2015 Share Posted December 7, 2015 Hi Everytime I run my shop through Google Page Speed insights it complains about this line: <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Questrial"> Basically it just means that the Google Font is not included in the big CCC file where most of the other css info is. Is there a reason I could not just add this line to the end of bootstrap.css instead for having it as a separate line? Are the fonts somehow treated differently? Anyone has a good answer? Link to comment Share on other sites More sharing options...
moy2010 Posted December 7, 2015 Share Posted December 7, 2015 Strictly speaking, you cannot include a webfont in the CSS code to be included in the CCC file. The best practices for webfonts dictate that you should use @FontFace instead of the link tag. 1 Link to comment Share on other sites More sharing options...
Guest Posted December 7, 2015 Share Posted December 7, 2015 Thanks for the suggestion. I checked here: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp and it seems as support is a bit random but new browsers should manage it. What is your experience, I just want to use this single google font, should @fontface replace the current approach with style? Does exceptions need to be added for ie6 or other older browsers? Link to comment Share on other sites More sharing options...
moy2010 Posted December 7, 2015 Share Posted December 7, 2015 (edited) In order to give my best suggestion, first I need to know:Will you use the full character set? Do you want to cache it? Edited December 7, 2015 by moy2010 (see edit history) Link to comment Share on other sites More sharing options...
Guest Posted December 7, 2015 Share Posted December 7, 2015 To be honest I am not 100% sure what full character set means. The shop needs to support european languages, so standard alphabet accents etc. I guess caching is preferable always right but I guess it depends if we need to sacrifice something else that is more important. Link to comment Share on other sites More sharing options...
moy2010 Posted December 8, 2015 Share Posted December 8, 2015 Here are the possible solutions for your webfont needs:- Use the Google webfont with the @FontFace CSS rule.- Download the webfont in .woff2 format, so that you can load it directly from your server with the @FontFace rule. - Convert the webfont in .woff2 format to a base64 dataurl to embed it in your CSS code. In this way it'll be cached, but it'll use more server resources (namely, CPU processing power). 1 Link to comment Share on other sites More sharing options...
Guest Posted December 8, 2015 Share Posted December 8, 2015 Thank you very much for these suggestions. I will give it a try and see how it works. Just out of curiosity. You said that using @fontface is recommended over using style. Does the latest versions of Prestashop follow this rule? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now