I'm using the following css:
#font-face {
font-family: 'bariol_regularregular';
src: url('Bariol_Regular.otf');
}
The font is being used and there are no errors on the page. When I add this custom font to text on the page it is visibly different to the default styling.
This is how the font should show:
However, this is how it is showing:
Pay particular attention to the apostrophe (') and the letter'g' where the most noticeable differences occur.
If I use a native app then the font shows correctly. The demo lettering on the site where I downloaded the font also displays correctly - https://www.dafontfree.net/freefonts-bariol-f64170.htm
Is there something I'm missing/not doing correctly?
The typeface has multiple glyphs available for various characters so you'll need to find the character codes.
Related
TL;DR
I want to set up a Jekyll webpage (al-folio template) with two languages in which
my Latin text renders as Roboto font,
my Arabic scripts renders as with the Google font I added (Noto Naskh Arabic), and
my code blocks be rendered with monospace font.
But I can only do two of the three above simultaneously. Help needed.
Context
I'm a newbie in HTML, Jekyll, sass, and all that. So I used al-folio template to build my personal site. It is important for me to write on it in both English and my right-to-left mother-tongue language (Persian with Arabic scripts). Aesthetically, the default Arabic font my browser renders is not pleasing. So I added a nicer Google font to my _sass/_base.scss:
font-family: 'Noto Naskh Arabic', serif;
Since the line above originally doesn't exist in the theme adding it also overwrites my English font. So, I resorted to including the correct Latin font name to the same line:
font-family: 'Roboto', 'Noto Naskh Arabic', serif;
Now, everything looks fantastic except my code block's font. Originally, its font was monospace, and I want them to stay that way. Unfortunately, I cannot fix the last bit. Seemingly, this multilingual need of mine messes up some theme settings in a way that either one or more of these requirements breaks. I specifically tried to enforce the default code block font by adding
font-family: monospace;
to this, this, and this lines, but had no luck. Seemingly, other elements' settings (particularly the highlight class) overwrite the font.
Any solution or workaround is appreciated very much!
I'm using 'Raleway' from Google webfonts in my Wordpress site. The standard number glyphs in this font are 'Old Style', meaning some number go over and others under the baseline. When I download and check out the font in Fontlab, I can see there are glyphs with modern styled numbers, they don't have unicode numbers assigned to them, but they have names like three.lnum or eight.lnum
Is there a way to display these glyphs from custom fonts in Wordpress? They don't show up in the Special Characters List. Thanks.
By adding font-feature-settings: "lnum" 1; to the CSS you can force lining numerals.
There is apparently a problem with Raleway hosted at GoogleFonts which hampers the font-feature-settings. This means you have to host the font yourself. Luckily Raleway is free to redistribute.
You can download it from GoogleFonts and run it through the FontSquirrel Webfont Generator. Set options to Expert, under OpenType Flattening check Lining Numerals to set lining numerals as the default for your version of the font.
There is a great article at codesmite.com explaining old style and lining numerals.
First, I want to mention that the icon fonts are not freely available ones. We actually purchased them.
I have a SCSS file that is making references to some icon fonts. I get most of it but not sure what the seemingly hexadecimal values mean.
$icomoon-font-path: "../fonts" !default;
$stream-check-1: "\e62f";
$stream-check-circle-1: "\e634";
I then seem to have CSS classes that reference these values:
#font-face {
font-family: 'myicon';
src: url('#{$icomoon-font-path}/streamline.eot?l1dykt');
src: url('#{$icomoon-font-path}/streamline.eot?l1dykt#iefix') format('embedded-opentype'),
url('#{$icomoon-font-path}/streamline.ttf?l1dykt') format('truetype'),
url('#{$icomoon-font-path}/streamline.woff?l1dykt') format('woff'),
url('#{$icomoon-font-path}/streamline.svg?l1dykt#streamline') format('svg');
font-weight: normal;
font-style: normal;
}
.myicon-check-1 {
&:before {
content: $stream-check-1;
}
}
I think I get most of it. My question is where do I get those hexadecimal values e.g. e62f?
UPDATE:
I've located some json files that are zipped up in file that mentions icomoon. Would these json files be of any help in this case? They look like this:
"\e62f" is CSS syntax for what would be in HTML: a character with hexadecimal code e62f. You can see the code-to-glyph mapping by inspecting your font file (the way to do this will differ based on what OS you are using).
I think I found the right solution here. It's an online font viewer and when I click on the font, it shows the assigned value.
Just drag and drop the font file and
it shows you the fonts and their values.
http://jsfiddle.net/iegik/r4ckgdc0/
Those are utf-8 icons. You can check them here.
For further lookup, check this.
That e62fis actually referring to the utf-8 encoding of characters. The HTML takes that "code" and turns it into a letter depending on what encoding you have. Most American websites I know of are just the utf-8
In your case, your webfont has replaced some of the normal values in order to use their own version of it. However, you might not be able to find the exact list of what other codes there are in this font as it's an Icomoon font (it appears to be) - which allows people to make their own webfont.
EDIT:
So if you have the font downloaded and have a mac - open up your Font Book Application. From there, find your font and look at all the characters. Choose the character you are looking for and copy it.
Go to a tool like this website: http://r12a.github.io/apps/conversion/
And paste your character into the green convert area.
The value that you are looking for will be in the css box! (Of course it will show up as a box on this site, but as soon as you use that code on a site where you have the font downloaded - you'll see it match what you saw in Font Book)
I was able to reproduce this with my own custom font - so I was able to make it work. This was a great question and helped me find a tool that I'm definitely going to book mark! Cheers!
I am trying to use AGA Arabesque font (downloaded from here), with this CSS:
#font-face {
font-family: 'AGA Arabesque';
font-style: normal;
src: url('//example.com/wp-content/uploads/useanyfont/140705120824ARABSQ.eot');
src: local('AGA Arabesque'), url('//example.com/wp-content/uploads/useanyfont/140705120824ARABSQ.eot') format('embedded-opentype'), url('//example.com/wp-content/uploads/useanyfont/140705120824ARABSQ.woff') format('woff');
}
I am able to use the font properly in Chrome. In the latest Firefox and IE, all I see is an English letter in place of the desired symbol.
In Chrome:
In Firefox:
What could be going wrong? Is there a way I could use base64 encoding to try and get around this issue?
EDIT: Other fonts, used this way, work correctly on all three major browsers
I converted the font to WOFF, and I found that all glyphs got mapped into the Unicode Private Use Area, in the U+F000 block. I don't know if this is a bug in the conversion tools or in the font. But given that this font is quite old (it's dated 1994, so it's from the Windows 3.1 era), it's likely that it doesn't comply with current standards.
I see two options to get this font working:
Get a font editor and fix the character assignment.
Use entity references to access the glyphs. Not very convenient, but possible: look up the hex code for your character in an ASCII table, add F0 in front of it, and use that code in an entity reference. E.g. [ has hex code 5B, so use entity refrence . (Sample page download)
This works in Firefox and Chrome for me. I don't have a Windows system handy to test Internet Explorer and the EOT format, but I suspect the situation there will be identical.
I'm afraid your WebFont is too large to be considered for rending. During testing even Chrome decided to render with Times New Roman.
If you're only using a set of characters from the font, consider creating a new font with only those characters.
Encoding the font using base64 will on narrow your audience, since not all browser support it. Interestingly enough the webfonts are loaded without an error, the browser simply refuse to render them, even the font preview in Chrome is just plain Times New Roman.
Also the link you posted doesn't link to a web font, just to a regular desktop font.
Scenario:
Flex application utilizing an #font-face declaration for embedding the font. (Embedded fonts are required to be able to rotate text.)
The application was originally developed as an English application, but during localization it became necessary to locate a unicode font capable of displaying Asian characters. The original implementation of the application uses four fonts to satisfy the various permutations of character emphasis. Bold, Bold Italic, Italic and Normal are all supplied through the corresponding Arial fonts in the Arial family.
Problem:
When trying to compile in the font as one that could be used for the bold, italic, and bold italic through something like (yes its not ideal, this was just a test to see if it could be done):
#font-face { src:url("/fonts/ArialUnicode.ttf");
fontFamily: myFamily;
fontWeight: normal;
fontStyle: normal;
advancedAntiAliasing: true; }
#font-face { src:url("/fonts/ArialUnicode.ttf");
fontFamily: myFamily;
fontWeight: bold;
fontStyle: normal;
advancedAntiAliasing: true; }
etc.
The problem is that when compiling the application Flex gets cranky and gives the following error message:
[ERROR] /dirpath/Style.css:[49,-1] exception during transcoding: Font for alias 'myFont' with italic style was not found at: file:/dirpath/fonts/ArialUnicode.ttf
So with some investigation it was determined that since Unicode supports neither Italics nor Bold, that when the Flex compiler attempts to embed the font, it gets unhappy as it cannot locate a font at the specified location that will satisfy the css requirement.
Now when the font-face declaration is taken back to its simplest form of:
#font-face { src:url("/fonts/ArialUnicode.ttf");
fontFamily: myFamily;
fontWeight: normal;
fontStyle: normal;
advancedAntiAliasing: true; }
everything compiles fine and the application displays all normal weight, normal style Asian characters fine. However when displaying things that are to be displayed in Bold or Italic in the style sheet, a box appears denoting that there is no embedded font nor any system font that can render that character in those styles.
Now here is where it gets weird.
If the exact same Unicode font is installed onto the system, it begins displaying the Asian characters in bold and italic. This makes no sense as the Bold and Italic characters are not in the font as demonstrated when Flex tried to embed that font to satisfy those css styles above. Yet it is evident that this font is being utilized to display the bold and italic characters as before they were just boxes before it was installed as a system font. Is this some kind of Flex voodoo? And if so is there some way I can programmatically invoke said voodoo as I cannot rely on the user having to go out and get the unicode font installed on their system.
Edit:
Here is some further information that may clarify the issue.
My question is not really how do we do multiple font faces and weights for roman characters, it is "How does Flex apply bolding and italics to a system font. Even more so when it says that that font does not support those when trying to embed that font."
The steps to make the issue reproducable are such:
Embed only MS Arial Unicode into the application and deploy it.
On a fresh Windows 2003 machine, open up Firefox and select Japanese language.
Navigate to the application URL and view the boxes where the bold and italics should be.
Now exit Firefox. Install the MS Arial Unicode font into the Windows 2003 system.
Open Firefox and repeat. The areas that used to be boxes, are now bold/bold italics/italics Japanese characters.
It isn't so much the how to solve this issue. There are plenty of viable solutions. However what I would really like to know is how does Flex apply bold and italics to a font that it says does not support bold or italics.
Thanks,
C
The problem is that you're specifying the same file name for all four font variants. The single ArialUnicode.ttf file contains only one variant.
Using the names from your c:\Windows\fonts directory, you want to embed arial.ttf, arialbd.ttf, arialbi.ttf, and ariali.ttf. These are the normal, bold, bold-italic and italic variants, respectively.
Beware that not all fonts can be embedded freely, both from a technical standpoint and from a legal standpoint.
The legal side is that fonts are software, and so need to be licensed just like any other third-party code you include in your program. You might want to look at the Bitstream Vera font family, as they are liberally-licensed. The family is highly capable, designed to be used as core fonts in Linux and such.
The technical side is that these rules are baked into the TTF and OTF file formats, and tools like the Flex compiler obey the license restrictions declared in the file. If the font is marked "no embed", it won't let you embed it.