I am using a custom font on my site and in search of a way that this font will be installed automatically on the user's system who is opening the site.
Is there any script or any way to do that?
Yes, font squirrel has an easy-to-use generator that will transform your font into various formats appropriate for different browsers.
The font is not actually installed on the user's machine, it's linked remotely, like an image or script. There's no way to automatically install things on people's machines for obvious security reasons.
The answer is Yes!
New in CSS3 is #font-face, which tells a browser to download a font and use it to render some text. This is an an example I made with jsFiddle. The caveat with #font-face is that each browser requires a different file type to work. On websites like Google Web Fonts you can use fonts that will work in all browsers.
Related
For some reason, a huge list of fonts is being downloaded from Google Fonts on my Wordpress website (staging site is linked), and Google PageSpeed Insights identifies it as Render-blocking resources.
The thing is I would basically just need the Poppins 300, 500, 600 on Italics and Regular, so I had embedded the fonts as Google states, linking to them on the header of the site, but I deleted that link and realized that the fonts are still working, so I assume that the Wordpress Theme must be the one responsible for this.
My question is, how could I reduce the amount of fonts so that only the truly necessary ones are downloaded and thus minimize those render-blocking resources?
Thanks a lot for your help and time!
If you are able to install a plugin you can select which fonts you use (including the font-weight) by this lightweight plugin and it will also combine - minimize the rest of the fonts so you will have less DNS requests for a faster web page.
Regenerate the embed link by selecting only the fonts you need:
https://fonts.google.com/specimen/Poppins?selection.family=Caveat
Google's page speed is telling me to optimize my CSS delivery for the following and I am confused.
http://*******.***/css/styles.css
https://maxcdn.bootstrapcdn.com/…t-awesome/4.5.0/css/font-awesome.min.css
https://fonts.googleapis.com/…ntserrat|Montserrat+Alternates|Open+Sans
The first one is my own css, the others are via some CDN systems. I thought using cdn for font awesome would be better than hosting it myself, and same for google fonts.
As for my own css how can I do any better than hosting it as a separate file? It is already minimized. Wouldn't it be worse to inline the whole css file for every page view?
The answers given here (Css optimization for google pagespeed insight) seems like a hack to trick the pagespeed insights.
What advice can you give me or insight to understanding what they mean would be appreciated.
Yes it'd be worse to go inline with your css as it cannot be cached. The whole point of CDN is that as many people uses them (google ones at least) it's high likely users will have them precached, hence better than hosting them at your server unrecognized by the url on the new http request.
Also I'm not sure why the SSL would matter but from your example, your server is the only one without the certificate.
While developing my website, I noticed how Chrome was rendering my fonts (Roboto).
Long story short, here is a Screen shot of both the browsers:
IE/Firefox:
http://i.stack.imgur.com/mEZWb.jpg
Chrome:
http://i.stack.imgur.com/4NTwY.jpg
Checked the website in m y friends' pc too, but the bug is still there. My chrome version is 44.0.2403.125 and the font-face is Roboto. What to do?
Did you download the roboto font to your computer by any chance? I had a similar problem where I downloaded and installed a font to my computer, but it was bolder than the font I had been using with google fonts for my website, and after I installed the bolder font version, the font on my website also became bolder. I discovered that chrome is set to use locally stored versions of fonts with the same name wherever possible.
The solution was to un-install the bolder font version stored on my computer and refresh the cache.
I'm using a couple of custom fonts in my site, one from google fonts and another that I uploaded along side the index.html. All properly declared in the css file.
When I preview the site throught the HTML Editor (Sublime Text 3) it shows just fine with all the custom fonts in place, but once I upload it to the server and acess the site through the internet all the fonts change to arial, I believe. This also happens in Internet Explorer. I looked the CSS file and its all good. The fonts are declared in the right elements and there is no overwrite.
Now the wierd part is that when I open the site in Inconito Mode from Chrome, the fonts load just fine. Which makes me think that there is no problem with the css. When I inspect the element thought the browser it shows as crossed out.
Have no idea what is causing this, anyone have ever seen something like this?
I'm having the same problem, not only with google fonts but also with fonts I made myself and are uploaded to the same server; In my case it was because I installed the chrome app disable web fonts (without knowing that I did that), and this app isn't working in incognito mode.
Make sure to clear the cache of your browser. If your using google font, i guess your reference is made to the google site. Make sure the server can access the google site.
I have already experienced a delay for the font to load because of the external reference.
Hope this help.
I am using the #import method as answered here by #ModernDesigner to import a Google Font to my Magento theme.
My question is, how does font importing work? Will the browser sit waiting to download the font on every page load, or is this just going to be loaded once and then following pages will just use a cached version?
What happens if the google server is down and the font can't be loaded? Will it completely block my site or will the browser continue and use the best fit alternative font?
I'd also like to add that I removed the http: from the url as the same css file is used for the checkout pages and using http breaks the https security status. Is this ok?
Thanks in advance!
Fonts will be cached, so they are just loaded once.
In case Googles CDN server should ever be offline, the fallback fonts of your CSS are used. Your site won't be blocked.
Just use :// instead of https:// or http://
But keep in mind:
You are exposing every user who's visiting your site to Google. I know this might sound a bit paranoid, but I feel like more people should see this as a disadvantage and care about the requests of their sites. Especially in times where intelligence services have gone crazy.