Say I have 2 versions of font customFont1.woff2 and customFont1.woff. I put the woff 2 version first and then the woff version 2nd in font declaration file. The browser supports both font formats. Does both of the fonts get downloaded or does it only download woff2 and then ignore the woff version or it downloads the other version of fonts too, to check the best format font to avoid FOIT?
according to https://drafts.csswg.org/css-fonts-3/#descdef-src:
This descriptor specifies the resource containing font data. It is required for the #font-face rule to be valid. Its value is a prioritized, comma-separated list of external references or locally-installed font face names. When a font is needed the user agent iterates over the set of references listed, using the first one it can successfully activate.
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.
We have a site with otf font files.
Everything works fine except how site looks in IE 11.
After investigation we have found a reason:
CSS3114: #font-face failed OpenType embedding permission check. Permission must be Installable.
I have checked Installable embedding allowance for otf files on Windows and there is font embeddability is set as Installable.
Also I use tool that makes font file Installable. But the tool breaks otf file.
Any suggestions?
The solution was to use .woff file extension for fonts instead .otf.
First, I have tried to covert .otf file to .woff format using one of free online tools for the conversion. But it broke the license.
So we decided to ask .woff files from the designer.
I've learnt that Google automatically serves TTF, EOT, WOFF, or SVG font files depending on the browser / device it's accessed from.
Now I am planning to host and serve the font files from my server itself, for which I would first have to download all the file formats of the web font(s).
How or where can I download the 4 file formats for a web font that I would like to use?
PS: By using different browsers -- Chrome, IE9 and Safari (dev - iPhone UA), I was able to get the WOFF, EOT and TTF formats. No luck with the SVG format though. It would be awesome if there's an even simpler way.
EDIT: Oh, and by the way, I do know that I can download various formats from online web fonts, but I am talking about downloading from the official repo here.
You can download all the Google Fonts directly from the Github repository (google/fonts), but as you know, only the ttf/otf format. So with those fonts, you can generate a web font kit using Fontprep or with the generator of FontSquirrel.
I hope it will help !
I downloaded a font from dafont.com and then added it to the stylesheet for a html file that's currently just on my computer. I changed most of the buttons to use that font, but now it seems to load way slower (it used to render almost instantly in my browser) because of the custom font. Is there a way I can fix this for the files local to my computer, and will it also cause the pages to render slowly once it's actually uploaded to a website?
You can try different approaches to improve performance:
Use a local reference before checking for an online version: this will work on your computer, but you never know if a user may have installed a different font with the same name (it's improbable, but that could break your expected look-and-feel).
Use lazy load to download the font after the page has been rendered: this may not be really useful is the font that you are using is the main font on your page.
Don't include #font-face for fonts that you are not going to use: some browsers will download the fonts whether they are used or not.
If possible, use fonts hosted externally (e.g.: in Google Fonts): this would make your page faster if the font is cached from previous visits, and it takes one connection away from your host.
This may sound a bit off but: choose the fonts wisely. If you pick a beautiful font but the files are 10MB, there will be a performance impact like it or not. And related to the file size,
If possible, gzip your font files: they will weigh less, they will take less time to download.
Read more about this topic on the links:
Preventing the performance hit from custom fonts.
#font-face and performance