How can I display different weights/styles of interstate font? - font-face

I have uploaded the font onto my computer and I will upload it to the server but I don't know how to write it in my code. I want to use "Interstate" but only "Interstate Black Condensed."
I tried changing the weights or adding that in the name but it just goes to a default font. The only way Interstate works is if I just write "Interstate," but the bold works but it does not give me the black category.
.numbers {
font-family:Interstate;
font-weight: 300;
font-size:30pt;
text-align:center;
color:#3baa4d;
}

If you want to use the Interstate Black Condensed version of the font I would recommend using a tool to generate a font face declaration for it, while converting the file for web use. This generator should do the trick:
http://www.fontsquirrel.com/tools/webfont-generator
All you have to do is upload the Interstate Black Condensed file to that site, then include the font files it gives you in your project, then paste the font-face code at the top of your css file.

Related

How to Name TTF Properly

I am having trouble with something that appears to be trivial, namely how to name a font, so that I get multiple styles of the same font to tile, display nicely, import nicely using Inno Script Studio, work with C#, not to mention applications.
For instance, here is an Adobe font that work nicely, first what I see in Control Panel, then the TTF details. I will then show what I did with my font and how I do not see the exact same thing, even though I did seemingly the same thing.
Adobe Source Sans Pro Tiles
Adobe Source Sans Pro Details
Adobe Source Sans Pro Semibold: The purpose of a screenshot is to show what I see from the actual TTF using Birdfont font editor, plus version.
Here is the black:
PostScript Name: SourceSansPro-Black
Name: Source Sans Pro
Style: Black
Full Name: Source Sans Pro Black
Here is how I named the font that I am using on my project. The font name, Venera, is the font family and then these are the styles: 100 Extra Light, 300 Light, 500 Medium, 700 Bold, and 900 Black.
BTW, I tried with the numbers, without the numbers, with spaces, and no spaces. There was no combination that worked like what I see with the Adobe font.
PostScript Name: Venera-900Black
Name: Venera
Style: 900 Black
Full Name: Venera 900 Black
Here is the bold:
PostScript Name: Venera-700Bold
Name: Venera
Style: 700 Bold
Full Name: Venera 700 Bold
I did think that maybe styles cannot have embedded spaces, so I tried both 700Bold / 900Black as the Style and even just Bold / Black. The latter was my thought that Windows does not support numbers s part of style names.
What I see is the fonts not overlapping like Adobe, but stacked. One has to delete the TOP font to see that there is a font underneath. Needless to say, Word in such a case does not see both fonts.
Here is what I see after I install the 700 Bold bold font and then the 900 Black font. I took this screenshot after installing the 700 Bold style and before installing the 900 Black style, but the image is identical to what I see after 900 Black. The order makes no difference, I have to delete one font to see the other. The fonts are not stacked like what I see with Adobe. Restarting the computer makes no difference. Removing the numbers or spaces make no difference.
Image with BOTH fonts, just one would never know it from the screenshot.
I suspect that when I get this first part working that Inno Script wants the full name and not the font name as stated in the help material and pages here in SO, but first things first. I need to get the font behaving.
For whatever it is worth, I can set the style to Regular and then set the font name to: Venera700Bold and Venera900Black. I would then wind up with two different fonts that show Venera700Bold Regular and Venera900Black Regular in Control Panel. Inno Script Studio is then quite happy accepting Venera700Bold and Venera900Black as the font name in the Files section.
It is tempting to use this answer, but all the fonts are the same family and I would really rather do things the right way and not subject users to different fonts, especially when I have 7 different Avenir fonts that I have to do the same thing for.
The answer should be Font Name is alphanumeric with however many spaces. The style is alphanumeric with however many spaces. The full name, as the editor says is the concatenation of the font name and style. The unique name and PostScript name must have no spaces and have the style separated from the font name by a dash. Sadly, this recipe, which works for others, such as the Adobe font that I picked at random, does not work for me, so I am missing a piece to the puzzle in my understanding.
Thoughts?
The style names should not include the numeric weight values. The numeric values should only go into the font's 'OS/2' table, not in the name strings. If you include the numbers in the style string, then the OS or apps will probably get confused, treating the number as part of the family name.
If you tried just using "Bold", "Black" as the style names and that's not working, then I would suspect the tool used to create the fonts.

how to add font in scss preprocessor?

I am adding a custom font in my project when I am adding this font using normal CSS that time it's working but when I am using this font in SCSS processor CSS that time it's not working.
I am sharing the screen shot of file and console error.
I do not find where I am doing wrong. Please resolve my problem.
The message is pretty much self-explanatory. The issue is you are using = instead of a : to assign the value to the variable. It should be
$roboto-Regular: 'robotoregular';
Don't be so specific with the variable names, variables are meant to hold dynamic data. If tomorrow, you change the font to some other font, using roboto-Regular as the variable name would make no sense. You should use something like
$base-font: 'robotoregular';
$fallback-font: 'Arial';
font-family: $base-font, $fallback-font;

How to use different styles of local fonts in plots with Gadfly in Julia-lang on Mac?

I want to create plots with Gadfly in Julia programming language using a specific font style (e.g., Avenir Next Bold) of a local font (Avenir Next) on my Mac. It works for the standard font style in the case of an standard histogram example:
using Gadfly
plot(x=randn(2000), Geom.histogram(bincount=100),
Theme(minor_label_font="Avenir Next",
major_label_font="Avenir Next",
key_label_font="Avenir Next"))
Yet when a specific font style such as "Avenir Next Bold" is used the default font is applied instead of the provided one. The Avenir Next fonts are saved as a "container" in a ttc format. I tried to convert the ttc file into single ttf files for the font styles and to call the exact paths where the files are located. Both don't work.
I think this is a case of getting the font name exactly right.
(I used HeavyItalic because it's easier to tell if the correct font is chosen.)
It might be that you have to use the PostScript font name, although I'm not sure why that would be, unless deep down in Cairo that's how fonts are accessed... ?
You can get the PostScript names (if that's what they are) by looking at a font manager. For example, FontBook shows them on the info panel:

Magento - strange characters in invoice PDF

Getting a strange character appearing at the end of each custom option in a PDF invoice. See the image below. Any ideas what this character might be?
It might be the case that the current PDF's font library that is used, doesn't support certain characters.
By default it uses the following Font library for PDF Generation: LinLibertineC_Re-2.8.0.ttf
In order to change the default PDF Font:
Get the desired font library's TTF-file and place it in the lib folder of your Magento installation.
Edit the following files (better mirror it instead of editing core files directly) in order to switch the font:
/app/code/core/Mage/Sales/Model/Order/Pdf/Invoice.php
/app/code/core/Mage/Sales/Model/Order/Pdf/Items/Abstract.php

BitmapFont in Skin doesn't draw labels correctly

I made a bitmap font using Hiero, called default.fnt and default.png. I can use these as a BitmapFont in LibGDX, and draw text with the font without problems, using font.draw(). But I can't use this font as the default font in a Skin. I've used the uiskin.json file from here(along with the rest of the skin, but I deleted the Droid Sans files before making my own font), because I have no idea how to make one of my own. From what I've read on the Internet, the .json file is correctly set up: it has the line com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } }, which should make the default.fnt the default font for widgets that use the skin. Still, when I run the program, I see this:
There should be a label above the buttons, and the buttons should have text.
If I do this: startGameButton.getStyle().font = font;, where startGameButton is one of the buttons, and font is the BitmapFont created like this: font = new BitmapFont(Gdx.files.internal("uiskin/default.fnt"), Gdx.files.internal("uiskin/default.png"), false);, the buttons shows the text properly. I don't want to do this since it feels too much like a hack.
I'm following this tutorial, but I've had to look some things up in later revisions of his code, because LibGDX has changed since it was written.
MenuScreen.java(the screen where there are problems)
AbstractScreen.java
Also please tell me if there's a better way to make the menu UI, or if you need other files. The uiskin.json is linked above.
Thank you.
I fixed it. The Droid Sans bitmap image existed in two places, it was part of uiskin.png too. I don't know how, but it probably read the font's letters from that file instead of default.png. So in the end I just renamed the font's .fnt and .png(and the file parameter in the .fnt) and did a search-replace inside the skin's .json, and it all works fine now. I don't know exactly what caused it, but maybe default-font is a reserved word or something.
Anyway, it works now. Thanks to Jyro117 for making me think maybe I shouldn't replace the default but add my own font.

Resources