I downloaded a font via google fonts. That file comes in different styles(?), e.g.: black, italic, bold, etc. and each is a separate .ttf file:
Merriweather-BoldItalic.tff
Merriweather-LightItalic.tff
...
In order to use it as a webfont, i converted the files individually into .woff2 files using the woff2_compress command line tool. That also works and I got:
Merriweather-BoldItalic.woff2
Merriweather-LightItalic.woff2
...
Now I wonder: is it possible to merge all these .woff2 files into one, maintaining the style info for each file? If yes: which command line tool can I use?
You could use variable fonts.
They include different design axis which could be interpolated to get e.g. different font-weights or font-widths.
More and more google webfonts are also available as variable fonts.
In your case the sans serif sibling "Merriweather Sans" is already available. The serif version can currently only be used as a traditional font.
There's also a filter option on google fonts to show only variable fonts.
Traditional "static" fonts can't be merged into one file since they can't contain multiple font-styles.
Technically, you could create a variable font yourself, but that's a pretty advanced task.
There is also the TrueType Collection (TTC) format. But afaik: it's not supported by most browsers.
BTW. if you need local woff2 copies of your fonts you can also use google webfont helper. This way you get the official woff2 versions - which might be more reliable than than self compiled font files.
Related
I recently created an icon font using Icomoon app. The generated font is intended to be used by the whole developer team, so they can add more icons and just commit the new font and CSS files. I understand that this could be achieved with the import feature Icomoon has provided.
However, knowing that we can import either the generated font/SVG sprite or the selection.json file, I'm curious whether those files produce the same outcome when imported to Icomoon. Which file should I import to Icomoon to ensure consistency, if I want to add more icons to the font set?
Use the selection.json file. It contains all your settings. The SVG font would work fine too, but in some cases, it might not contain your preferences/settings.
I thought that pygame.font.Font was to load .ttf fonts, and that you can't load a font without having the .ttf file in the same directory, but I have seen a video where someone load a font without having the .ttf font in the same directory. I want to know what fonts can I use with pygame.font.Font without having the .ttf file in the same directory
There are generally two ways to use fonts in pygame: pygame.font.Font() and pygame.font.SysFont(). pygame.font.Font() expects a path to a font file as its first parameter, whereas pygame.font.SysFont() expects a string with the name of the font.
You can load any TrueType font file (*.ttf) with pygame.font.Font(). To load the font file myfont.ttf in your project directory simply call pygame.font.Font("myfont.ttf", size). Substitute the path to your file for the first parameter if you have it in a different location. You can use either a relative or an absolute file path.
Alternatively, you can use a system font by calling pygame.font.SysFont("fontname", size). Which system fonts you can call depends on the system on which you run this. If it cannot find the font you tried to supply, it will fallback onto the default system font. You can pass it a comma separated list of font names which will then be searched in order and the first available font will be returned. pygame.font.get_fonts() will return a list of all the names of the fonts it can find on your system which you can then use with it.
Lastly, to load a font file that isn't a TrueType font, you can use the pygame.freetype module which supports TTF, Type1, CFF, OpenType, SFNT, PCF, FNT, BDF, PFR and Type42 fonts. You can user either font files by calling pygame.freetype.Font() or system fonts by calling pygame.freetype.SysFont() similar to the font module.
So if you want to use the font 'Arial' and it is installed on your system, you can call it using pygame.font.SysFont('arial', size). If you don't have it installed on your system or are unsure, you may provide the path to the font file directly, e.g. pygame.font.Font("C:\Windows\Fonts\Arial.ttf",size).
You should first import pygame then type print(pygame.font.get_fonts()) in your IDE in order to see all the currently available fonts. :)
Some findings from OS specifics perspective:
On Windows pygame.font.get_fonts() returns large number of system fonts but on Ubuntu installed as WSL, we get only 3 fonts: ['dejavuserif', 'dejavusansmono', 'dejavusans'].
There doesn't seem to be OS independent font names working, including Aerial.
If you want OS independent font, use pygame.font.Font(pygame.font.get_default_font(), font_size)
The fonts available will be system dependent. However, you can get a list of all of the fonts available by calling: pygame.font.get_fonts()
Sadly the only one you can use in pygame is 'freesansbold.ttf' unless you download a font from a website. So you should use that if you can't or don't want to download a font.
I decided to change the font of my page, with another downloaded from internet. I tried this way, but it doesn't work. The file "font.ttf" is in the same folder as the html file.
#font-face {
font-family: Test;
src: url(font.ttf);
}
header {
font-family: Test;
width: 100%;
margin: auto;
height: 48px;
background-color: white;
}
If your downloaded font has been saved in the main fonts folder on your system then you should just use it the same way as you would use any other font.
E.g.
font-family='New Font';
There should be no difference :)
Directory to the fonts folder;
Control Panel > Appearance and Personalisation > Fonts > Add Font
To add font to your website, you will need more than the font.ttf file. Also, be as organized as possible from the start and don't just dump everything into one level. Later, when more things are added, you may have a mess and it can get more confusing as things get more complicated. Neatly organize into folders.
1- You will need webfont extensions. Meaning, use an online generator to generate webfonts by submitting your .ttf file (make sure you follow the license allowance). Those extensions work on different browsers.
2- You need to create a .CSS file for webfonts. Here is a link for an example:
[link] How to embed fonts in CSS?
3- You need to follow the exact path on how your fonts can be reached.
4- When you open up your .ttf file, pay attention to your font spelling. (this part can be tricky)
5- You will also need a .htaccess file that helps to link your web fonts to your site. You may see your desired font on your local device browser but it may not work on another device that does not have that font installed.
I've been using Font Awesome for a little while now, and was updating to 4.0 today. I decided to use the BootstrapCDN this time, and I've run into problems. The icons aren't being displayed despite using the new class names.
The CSS file is getting pulled down fine, but when I look at developer tools in Chrome the fonts aren't being served. Based on the relative path to the font within the CSS file (src: url('../fonts/fontawesome-webfont.eot?v=4.0.0');), I was able to test the link and download the font:
http://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot?v=4.0.0
So the link is correct (of course). Anyone know why the font isn't being served?
You have to do more than just use the new class names. Did you make sure that you added the fa class as well?
updating fonts to existing fonts
I’m already using 5 icomoon fonts in our website which was downloaded from icomoon. I want to include 2 more fonts. What should I do?
Can I add the new 2 fonts to existing fonts?
If yes, How can i add them?
I'm assuming you want to add new "icons" to your existing fonts. The font pack that you download from IcoMoon comes with a "selection.json" file. If you have this file, import it to the IcoMoon app using the Import Icons button. After doing so, you can select more icons to generate a new font.
If you don't have access to this "selection.json" file, you could import your SVG font using the same Import Icons button. The downside in this case is that you may need to add your glyph names again.
Anonther way to save/load previously created fonts is using the project manager: Main Menu > Manage Projects. You may want to download your project so that you can load it back later.
More info: https://icomoon.io/#docs/save-load
at present icomoon does not allow you to import .ttf files. but it can be done using a svg, use services like http://freefontconverter.com/ to convert your .ttf file into an svg, once it is done you can import the svg file it in your current project and add more icons to it.
go to the icomoon site, click on the icomoon app, click on the import button and import the old icomoon.SVG file which is in your code you can see all the icons which are in that file in icomoon site once import is done and also import new SVG or select from already existing icomoon list which you want to add to the existing list, select all(i.e old icons which are already there and new icons which you want to add to the existing list) click on generate font and then download that file, extract it you can see fonts folder copy all the files in that folder and paste it in your code(I mean replace the existing files in your code with this files) and you can see styles.css folder in extracted icomoon zip there you can see newly generated classes, copy those newly generated classes and paste it in your code where other icon classes are present
Not sure if this has been resolved yet as it's an old question but there are a few approaches you can take depending on what you currently have available.
Ideally you will still have the selection.json file from when you first downloaded the first 5 icomoon fonts. If not you might still have the project stored in your browser. If so then you will have the current 5 fonts as is with all the settings and class names the same.
If you are able to get that great then you will only need to add in the code for the two new fonts. To add the two new fonts you can import the entire font file for both to IcoMoon by selecting the svg version of the font. Then add it to your existing font that has the original 5 fonts and you should be good to go.
The key is restoring the original 5 so work doesn't need to be repeated to get everything back to as it was. If you can't do this than it is probably easier to add the 2 new fonts as a new project in icomoon and just condense those 2 fonts into 1 new icon font.
I have some information on the basics of icomoon and importing projects here: http://stephentvedt.com/2014/04/03/using-custom-icon-fonts-icomoon-quickstart/
As an alternative;
If you have an existing TTF (True Type Font), use for example font-converter.net to convert the TTF to SVG. In IcoMoon you can now click "Import" to bring back your icons/characters by importing the SVG file, and add icons as you see fit.
In case you're looking at another font format (under MacOS, TTC for example), then first consider converting it to a TTF (this worked for me: transfonter.org).
Note: I'm in no way affiliated with either websites.
I tried Vaibhav Soni's suggestion first, but that website seems no longer working properly.
Also note that certain fonts are commercial and/or have copyright limitations, so you should not use those fonts in this fashion.
The correct way, You should import all previous module icons and new icons. Then generate fonts and replace the fonts folder and style.css file directory in your code.