I've seen that some Google Webfonts now use WOFF 2.0. Can I somehow convert my existing WOFF-fonts to this new (and supposedly better format)? And how?
Certainly! You can convert the existing woff files to the new format. You will get more than 30% improvement on the compression ratio.
Even though browser support is limited at this moment
http://caniuse.com/#feat=woff2
It will eventually change. You should use the #font-face fall back and start putting these kind of directives in your css now.
#font-face {
font-family: MyFont;
src:
url('font.woff2') format('woff2'),
url('font.woff') format('woff');
}
You can use the following tools to convert from ttf/woff to woff2.0
http://everythingfonts.com/woff-to-woff2
https://github.com/google/woff2
I could't find any WOFF to WOFF2 converters, but you can easy convert your current WOFF font to TTF with any service like this. And then using this WOFF2 cheat sheet, convert TTF to WOFF2.
I tested those steps with my fonts, converted font WOFF -> TTF -> WOFF2 works fine.
I managed to convert with
https://everythingfonts.com/woff-to-woff2
did it for my fontawseome icons
Font Squirrel generator now includes WOFF2 in it's generated fonts. So you can create it that way from your TTF file.
On Ubuntu, you can convert WOFF to OTF/TTF and then to WOFF2:
woff2sfnt myfont.woff > myfont.ttf
woff2_compress myfont.ttf
Package dependencies:
sudo apt install woff-tools woff2
Related
I am trying to use a custom font, which is not available via Google Fonts. I unzipped the font and put it into src/assets/fonts of my React project.
In my index.css I am loading the font like:
#font-face {
font-family: 'LemonMilk';
src: local('LemonMilk'), url(./assets/fonts/LemonMilk.otf) format('otf');
}
I tested the app both on the localhost and hosted it on the web for testing and it is working fine, since the font is installed locally on my machine, but if I open the app on a different machine it is not working. I also deleted the font from my machine and the fallback font started to show since then. What am I missing ? Thank you
It's looking like Your browser has a problem with understanding the font file. Try to make the webfont package from the font file. There is lot of tools to approach it:
https://www.fontsquirrel.com/tools/webfont-generator
Webfont package will contain the font in all major supported formats and will generate the css #font directive for You.
DISCLAIMER: Ensure that You have the rights to use the font.
well i suggest creating a different css file for your fonts then import it to your main css also this site generate font-face for your font with css file!
The correct font name is Lemon/Milk and you'll need to convert it to other format like WOFF WOFF2 as well.
Please Follow this:
Go the this Website free online font generator
Upload your font and check TTF, EOT, WOFF, WOFF2 (See browser support)
Click Convert > Download
Upload the newly converted fonts to your server
Finally your CSS should look like similar to this.
#font-face {
font-family: 'Lemon/Milk';
src: url('LemonMilkbold.eot');
src: url('LemonMilkbold.eot?#iefix') format('embedded-opentype'),
url('LemonMilkbold.woff2') format('woff2'),
url('LemonMilkbold.woff') format('woff'),
url('LemonMilkbold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Please Note that you'll need to convert any other font weight too. and don't forget to add the correct path
I would like to use a custom font that I have in TTF format only, so I need to execute a script that would detect a support of #font-face with TTF format. What are my options?
TTF is supported by a lot of browsers. I wrote a check to test #font-face support by trying to render a small custom TTF font. If you disable the test for IE8 and below from this script (which uses an EOT font), you'll have the test you're looking for.
You can find the script here: https://github.com/RoelN/font-face-render-check
There are a ton of posts here that get into this subject in great detail.
Just to get you going if you only have a TTF file you can use Font Squirrel to convert the TTF file into other common web fonts.
These will help provide fallbacks for all of the different major browsers
The site will also help you with the generation and usage of the #font-face tag in CSS to embed the font correctly.
My site here won't pick up 'proxima nova' otf in Chrome and can't understand why.. Here's the CSS:
#font-face {
font-family:'Proxima Nova';
src: url("/Fonts/ProximaNova-Regular.otf") format('opentype');
}
Any ideas much appreciated.
Just encountered the same problem, you don't need to specify format for otf fonts, just remove the last part of the src attribute:
#font-face {
font-family:'Proxima Nova';
src: url("/Fonts/ProximaNova-Regular.otf");
}
This comment helped me to sort this problem out:
https://github.com/facebook/create-react-app/issues/2609#issuecomment-311231425
different browsers like different font file formats, for example IE will only acknowledge .eot and i think im right in saying that webkit browsers prefer .ttf files.
Use Squirrel's font face generator to create all the various font files you need, it will also give you an example of how to include them all properly in your css font face declarations
If you see 404 error for this font request in browser console, the problem is not in the browser but rather on the server side. The solution is to add mime type for .otf file extension in IIS on the web server. Since otf is a pretty new format, it's not available in the default list of mime types in IIS serevr; you have to explicitly add one.
Best for chrome is base64
src: url(data:application/x-font-woff;charset=utf-8;base64
http://www.fontsquirrel.com/fontface/generator
co generate this
I'm about to use some custom fonts for my website.
I know that currently there are few websites providing free webfonts like: Google WebFonts
But, the font I want isn't there. I want to know if there is any way to convert this font that I have to a webfont. (my font extension is TTF)
Also, I downloaded a few webfonts, their extension was also TTF. Are webfonts something different?
Different browsers handle webfonts differently. TTF will work in most browsers but not IE or on iPhones. I'd recommend checking out Font Squirrel as it has a lot of fonts on there including a #font-face generator that will help you set things up.
Web fonts are nothing special; they can be TrueType fonts, as long as the browser supports that format (most do). To use a TrueType font in your CSS, use
#font-face {
font-family: {given name};
src: url({path to font file}) format('truetype');
}
Then use
font-family: {given name};
in any rules you want to use the font for.
I've previously used Font Squirrel to generate the web font files from a ttf.
I would recommend trying Cufon as a fallback for browsers that don't support css #font-face
You can just use the ttf files in combination with #font-face. See http://www.html5rocks.com/en/tutorials/webfonts/quick/ for more information.
This might be of use -
make sure the license for the font you are using allows it though.
I need to use #font-face feature and my fonts are in TrueType (TTF) format, so how to convert TTF to OpenType (OTF) format.
If you are on Linux, you can use FontForge, which can be scripted from Python.
#!/usr/bin/python
import fontforge
font = fontforge.open("STIXGeneral.otf")
font.generate("STIXGeneral.ttf")
Here is a longer python script that does this for a whole directory at a time:
http://fonts.fileformat.info/bin/otf2ttf.py
It was painfully hard to find how to do it correctly. Here is how I got it to work on OS X
$ brew install fontforge
$ fontforge -c 'Open("my.ttf"); Generate("my.otf")'
I was desperately looking for pip install fontforge which does not exist and I haven't got it to work with python - I guess you need to compile it with --enable-pyextension or something.
you can use TTF file format directly in css :
#font-face {
font-family: Vinegar;
src: url(http://www.4bit.co.uk/testing/design01/vinegar.ttf);
}
h3 {
font-family: Vinegar, "Times New Roman", Times, serif;
}
It is working!
Or you can use this link to generate your font face!
A quick Google search for ttf otf converter gave me a number of results, such as:
https://onlinefontconverter.com
http://www.freefontconverter.com
http://www.font2web.com
No idea how well they work, but you can try them.
For cross browser/mobile support you definitely need at least three formats:
Embedded OpenType: eot for Internet Explorer 6-8.
There is a command line converter: http://code.google.com/p/ttf2eot/
Web Open Font Format: woff the W3C recommendation for webfonts: http://www.w3.org/TR/WOFF/
A converter can be fond here: http://people.mozilla.org/~jkew/woff/
and TrueType: ttf for Safari and Opera
(You could add Scalable Vector Graphics: svg for older iOS support…)
The bulletproof #font-face Syntax is this:
#font-face {
font-family: 'Vinegar';
src: url('vinegar.eot?') format('embedded-opentype'),
url('vinegar.woff') format('woff'),
url('vinegar.ttf') format('truetype'),
url('vinegar.svg#svgVinegar') format('svg');
}
Further resources:
http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
You might also want to check out this tool:
https://github.com/zoltan-dulac/css3FontConverter
As mentionned by others, fontforge scripting has switched to python.
I found the easiest way was to invoke python from the command line.
I could convert multiple ttf fonts to otf on Arch Linux this way, but it should work on other distros by installing fontforge with your favorite package manager.
[user#host]$ sudo pacman -S fontforge
[user#host]$ cd /path/to/your/fonts/folder
[user#host]$ python
>>> import fontforge
>>> import os
>>> fonts = [f for f in os.listdir('.') if f.endswith('.ttf')]
>>> for font in fonts:
... f = fontforge.open(font)
... f.generate(font[:-3] + 'otf') # changes extension from ttf to otf
...
>>> exit()
With the Font Squirrel #font-face generator.
You could also try this:
http://www.freefontconverter.com/