I use google webfonts in my website. Unfortunately, it's Korean language and the font files are bigger than English. It's just one font-family but 3 files are downloaded (normal, bold, extra-bold). Each file is about 9MB.
When you first visit the site, it takes about 20 seconds to download the fonts and you can't see the letters. Second page is ok as the fonts are already available.
I want to workaround this problem. Is there a way to detect if the font files are already downloaded. I'd like to use a non-webfonts if the webfont is not downloaded yet. And if the webfont is downloaded, I want to set the font-family to the webfont.
I also want to implement a way to change the font-family on the fly on the first page when the download is completed.
Thanks.
Sam
Related
Due to some concerns with GDPR I want to host all the google fonts myself
For background, I am building a text editor in which the user can pick any google font. The chosen font is then loaded on the fly.
This is not a problem, I downloaded them all from the official Git repository. However, in the zip they only give you ttf files not woff. I have read for max compatibility/performance woff is the preferred choice.
I have found sites like this that let you get individual fonts as woff but I want them all.
Does it really matter if I just use the ttf ? I can load them dynamically using font face api but is that OK cross browser?
If answer to 1 is that I should use woff (or something else), then how can I get the entire Google Fonts library as woff
Unless you want to support IE, it's well supported across all other modern browsers.
TTF/OTF - TrueType and OpenType font support
Having a difficult time trying to get the proper .ttf file from the font family and set-up into my website.
https://freefontsdownload.net/free-futura_bk_bt-font-73014.htm
body {
font-family: Algerian ;
}
can i know what is the font-family for the link i provided ? ( does not wanted to download and save it into my server )
You can directly import fonts that can be found on Google Fonts
with tags without needed to download and serves the font files locally. However, there are also fonts that are not available on Google Fonts. For those fonts, you can only download and serve it locally on server there's no way to escape. Or you may try to search and see is there anyone who have the font files on their server and then directly use theirs', but I can say most probably you wont be able to use as you will be blocked by CORS (Cross-Origin Resource Sharing).
It's actually quite simple to setup fonts. After you downloaded the font files, normally there will be font files (eot, ttf, svg, woff...) and a CSS file, just put the font files somewhere on your server (prefer on root folder named "fonts"). Then open the CSS and edit the source to the directory that you store your font files ealier. url("../fonts/your-font.ttf")
simply go onsite of google font choose font then copy meta tag then use font family.
<link rel="shortcut icon" href="https://www.website.com/template/img/website/favicon.png?ver=v2.1.31">
We changed our 32x32 png favicon to a 48x48 png favicon, because one of our websites reverted back to the default Wordpress favicon and after deploying the change we noticed that the favicon was reverted back to the Wordpress favicon still on the websites we deployed. So I was wondering if there was a fool-proof way of making sure that our favicon appears on the search result page.
One of the answers I got from Googling was that we should change favicon.png to favicon.ico, but the Google documentation tells us it's not necessary. What changes can we do to make it work without changing the file format?
https://developers.google.com/search/docs/advanced/appearance/favicon-in-search
First, keep in mind that Google can take days or weeks before reflecting your icon in its search results. So any change you make needs patience, unfortunately.
However, you can get insights from Google. Visit https://www.google.com/s2/favicons?domain=www.website.com , just make sure to replace the domain parameter with your own site. There is no evidence that this is what Google is actually using to fill its results pages. But chances are that what this entry point returns is what you can expect in results pages a bit later.
According to me to add a favicon, one should use the .ico image. Otherwise, it might show some issues. Try converting your .png image to .ico by using this converter.
This will work for sure.
Here's a text from a webpage I searched about the favicon.
A favicon can actually be either a PNG, GIF, or ICO file. However, ICO files are typically used more than others as the file size is smaller and it is supported in all major browsers. PNGs are used more commonly for IOS, Android, and Windows 10 devices.
So according to this .ico is mostly preferred over any other extension of the image. Hence I would recommend you to use .ico extension for the image.
what's the easiest and most effective method for uploading fonts to a wordpress site? I have fonts on my computer I'd like to reference instead of google fonts already embedded in. wasn't sure if ftp (and in what location) or an app works best. danke.
There are several things you need to know before embedding a font in your site. I can walk you through the process here:
Make sure the font you want to upload is allowed to be on the web. Some foundries don't want their fonts embedded because people can steal them from the embedding website. Check who makes your font and what you need to do to satisfy their licensing. All Google fonts are open licenses, so you don't have to worry there.
Find the font file on your system. This is usually a .ttf or .otf file. If it is not one of those, it will be difficult to embed them correctly.
Once you have your font, you need to convert it and package it. This is easy with services like FontSquirrel. They will do all of the converting and packaging for you as well as writing the CSS to embed the fonts.
The method you are using to embed the fonts is known as #font-face. This code should be in your stylesheet. Here is a tutorial on using #font-face. Make sure when you put the code in your CSS file that the fonts are in the right directory that you are targeting in the URLs for the fonts in the stylesheet. FYI the normal stylesheet location for Wordpress themes is in your theme folder under styles.css. I believe that FontSquirrel's generated CSS puts the fonts in the same directory as the stylesheet, so they may need to be in the theme's root to work properly. Though, I would suggest putting them in a fonts folder and updating the URLs in the stylesheet.
That's it! It's a little more difficult than just adding a file, but it should work. If you have issues with spacing or lining things up, I have another answer I wrote that might help you out, there as well.
I downloaded the Franchise Bold Font. I know how to use it in my code, but where do I put the font files in my webserver root so that they get found and used?
the URL is: http://www.derekweathersbee.com/franchise/
To use a font on a web page it needs to be a WebFont - you can't just put a TTF file onto a webserver.
Font Squirrel offer a service to create/convert WebFonts - there's a fair bit of info on how it works there and a Google for webfonts will bring up a tonne more.
Obviously you need to rights to do convert and use the font - the font you're using appears to be free but if I were you I'd credit the creator/throw them a link somewhere!!