Understanding SCSS - css

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!

Related

Font is not displaying correctly, using #font-face

I am trying to use a font for a website. The typeface file is being loaded in correctly (I can see the file in my network tab), however it is not displaying correctly. I have used font-face to import the fonts, with the following styling rules below,
#font-face{
font-family: 'BwGradual-Thin';
src: url('../fonts/BwGradual-Thin.otf') format('opentype'),
url('../fonts/BwGradual-Thin.woff'),
url('../fonts/BwGradual-Thin.eot');
}
#font-face{
font-family: 'BwGradual-Regular';
src: url('../fonts/BwGradual-Regular.otf') format('opentype'),
url('../fonts/BwGradual-Regular.woff'),
url('../fonts/BwGradual-Regular.eot');
}
I have attached 2 screenshots below, the first of the network tab of with the correctly loaded typeface file, which shows how all characters should be displayed on with the font. The second screen shot is how the font displays on the website. Only the 't' character has is displaying correctly.
Dev Tools Network Tab
Heading Screenshot
Any assistance would be greatly appreciated.
I am still unsure as to why the method above does not work, however I have got the font to display correctly. My solutions was;
Replace .otf files with .ttf (Converted using CloudConvert)
In font face, declare all fonts as the same family, .i.e. font-family: 'BwGradual' and then declare the font weight of each type. i.e. 100,200,400,etc
Set -webkit-font-smoothing:antialiased. (This was not workign with .otf file types.)
Very specific question so, not sure if useful for later uses, but hope it helps.

using unicode_range to exclude numbers only

I'm using a custom font and loading it through #font-face. The text looks fine, but the numbers look screwy (only on chrome-windows, which is a very well know bug. And yes, I tried using the svg format for chrome, which solved the numbers but screwed the text). I decided to limit my own font to only [a-z][A-Z], and using this generator got this:
unicode-range: U+0041-U+005a, U+0061-U+007a;
And it seems to... not be working. Numbers are still being displayed using the font. How do I find the right range to use\some other solution? I'd love for a general solution, for example if I want to limit future fonts as well.
Thanks in advance!
P.s.
While I'm on the subject - I'm assuming there's no way to load the same font twice - using the .svg file for numbers and .otf for text, right? Because if possible that'd be awesome as well.
You can use #font-face rules to specify that a font family name (which is up to you to decide) is mapped to a specific font except for some character range, for which another font is used. This even works for local fonts, e.g. as follows:
<style>
#font-face {
font-family: foo;
src: local("Times New Roman");
}
#font-face {
font-family: foo;
src: local("Arial");
unicode-range: U+0030-0039;
}
p { font-family: foo }
</style>
<p>hello 123</p>
On supporting browsers, “hello” appears in Times New Roman (if available) but “123” in Arial (if available); the range U+0030-0039 is the common European digits 0 to 9.
You can use similar techniques for downloadable fonts.
The bad news is that unicode-range is not supported by Firefox or by IE 8 or earlier. They fail differently: for the code above, IE 8 uses Times New Roman, ignoring the latter #font-face rule, whereas current Firefox uses Arial, as if the unicode-range restriction were not there.
Finally, I used a "brute-force" method. Using Font Squirrel's webfont generator I recreated my font files, and using the advanced options > custom subsetting, I completely removed the numbers from the font.
Seems like a terrible solution, but the best I could find.

Installed font from Google looks different than font gained through their API?

I'm going mad with an issue and I wonder if anyone can help. I'm currently using http://font-combinator.com to see what different style of fonts look like together. This website simply loads fonts in from Google Fonts and displays them onscreen.
Now I choose a font, think it looks ok, and head over to Google and download it. I then paste that font into my local font directory so I can see what it looks like locally, and add it's name in my css like so:
font: 100%/1.6 "Font name here";
color: #bbb;
font-weight: 400; (for example)
Problem is when I look at it in the same browser as I did the Font Combinator, it looks rougher and more jagged. No settings have been changed. The font on both sites is 16px. For reference I am using Windows XP with cleartype turned off (I don't like it).
Now if I link to Google Fonts directly through my website, then it displays the same as on the Font Combinator. I don't understand how installing the same font that Google uses produces a different result? Ideally I would like to host the font on my website myself, but can't see a way around this? Am I doing something wrong, or is there something I've missed? Thanks!
For reference I am using the following reset:
html,body,etc.... {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style-type: none;
font-size: 100%;
}
Edit: #Fontface code that I've used, that does seem to look the same!
#font-face {
font-family: 'Molengo';
src: url('./fonts/Molengo-Regular.ttf')
format('truetype');
}
(just picked this font as an example)
I had same problem and it's a mess and hard to solve. The main problem is that the font you've downloaded is not actually the "same" that google webfonts provides.
The font family is the same, but Google can provide it in different formats. The font that you've installed on your system is probably a .ttf file, that's a truetype font and Windows can use it. But, if you look the css that Google serves you when you includes a font, it's something like this:
For this:
http://fonts.googleapis.com/css?family=Open+Sans
you get this:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
As you can see, if there is no local matching, it requests the font BUT in woff format, it's the same font but in another font format. In fact, I've done this example using chrome, but the css that google provides choose the best font format depending on browser and SO that made the request.
That's the reason why you see same font family rendering so different, the local one is .ttf, the another could be woff, svg (I think for IE), and there is other posibilities. And same font on different formats looks different, sometimes too much different.
I think the best choice is to create that css by yourself, not asking it to Google, and remove the local part, but it's important to add the other formats, other way it will not work on all supported browser.
This is potentially a duplicate of this question but this was my answer to that:
Fonts render differently based on:
Screen/Monitor resolution
Browser
Operating System
Size of use and hinting
Without seeing your code the only things I can recommend are:
Making sure you are using decent reset css (something like this: http://meyerweb.com/eric/tools/css/reset/).
Try adding font-weight: normal; to fonts to see if this makes a difference; sometimes browsers and frameworks try adding a fake bold to things.
Assuring you are using the actual versions of the fonts and not just applying CSS styles.
If all else fails then try bumping the font-size up/down a small amount and see if the font hints better at these sizes.
Some people also recommend not using the #import or direct link from google. Perhaps try downloading the file and using #font-face in your css.
Hope this helps!
EDIT:
If you’re hosting the font yourself — double check the #font-face call. Make sure you are calling all versions possible of the typeface. Also, Some browsers prefer certain formats being called earlier.

Chrome uses a different baseline for my webfonts [duplicate]

I'm using a custom font in a page I'm developing, Droid Sans, and at certain font sizes, the bottom is cut off, but only in Opera and webkit browsers.
It's easy to reproduce on Google's own webfonts page looking for Droid Sans and showing the whole alphabet at 18px: http://www.google.com/webfonts
It's especially clear for the lower case g.
Is there some css trick / hack I can use to increase the line height / show the whole character or am I really limited to only certain sizes of the font?
line-height and padding for example don't change anything and 20px font-size works fine and at the moment I am using Windows 7.
Edit: By the way, I am aware of a similar question here but as the accepted answer is changing the font size and the rest of the answers do not apply, it is of not much use to me.
Edit 2: An example that at least for now shows the problem (left hand column, under the slideshow, Il Cerca Viaggi).
Edit 3: The problem seems to be limited to Windows although I'm not sure which versions.
Edit 4: I have added a screenshot from Google Webfonts to show that the problem is not specific to the site I'm developing.
Although it is not the solution I am looking for, I have found a possible solution that might work for others:
In my original style-sheet I have specified the font as follows:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
font-weight: normal;
font-style: normal;
}
This is causing webkit browsers to use the woff file / format.
Changing the order of the font specifications and removing the hash-tag after the svg specification (why is that there anyway?), causes webkit browsers to use the svg file / format:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.svg') format('svg'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This solves the problem, all characters are displayed correctly.
However, at least in Windows 7 64bit, the svg font is not as sharp as the woff font, it's kind of blurry so I will not be using this solution and am hoping for a better one.
To a similar question, one answer suggested that, while this appears to be a Windows font rendering issue specifically, hosting svg, eot and otf versions of a TrueType font (TTF) containing the font, which was not optimized for the web, had fixed the problem for its provider. If possible, get a clean, un-optimized version of the DroidSans font and export the web fonts yourself.
EDIT: Sorry all, I was out for the holiday and didn't have access to SO. Since I've been back, I've done a little research into exactly what's causing this problem on Windows machines...
It appears that the issue lies with the way the OpenType format is rendered on Windows machines. The issue with truncated descenders seems to transcend software type to affect multiple Windows programs attempting to render OpenType. Currently, you have the Embedded OpenType format (EOT) version of the font listed first in your CSS document under #font-face. Since Chrome and Opera both recognize this format, they'll disregard the subsequent source declarations and use EOT to display the font. Unfortunately, there doesn't seem to be a quick fix that you could apply to an OpenType font itself to force the software rendering it to allow adequate line-spacing for the lowest of its descenders on Windows machines...
However, you can be choosy about which fonts you feed to your viewers' browsers. Personally, I would recommend placing the SVG version first in your CSS, and for browsers that don't recognize this format, suggest TrueType (TTF) second, then WOFF, then EOT for browsers that don't support any of the aforementioned (some older versions of IE appear to support OpenType exculsively). If the SVG rendering isn't much to your liking, try TrueType first instead.
Alternatively, although I'm no longer really that confident that it will help, you can download a TTF of DroidSans at FontSquirrel and use a software package like Typograf to export web fonts (EOT, WOFF, SVG). Try rearranging the sources in your CSS as outlined above first, though.
ANOTHER EDIT: My erroneous use of TIFF instead of TTF has been redacted to avoid confusion in the future. Apologies for the mix-up, guys...
I am not sure but try to add this for padding to work
display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;
Set the line height to normal, it is a firefox bug and use the line height in %
I think this might do the trick
It all boils down to the font itself.
Look here
http://jsfiddle.net/DdMej/2/
The first row uses Drod Sans by Google fonts.
The second row uses the font you have on your site.
edit 1
Screenshot
http://imageshack.us/photo/my-images/811/screeniy.png/
I too was seeing my Google Font 'Lato' cut off at the bottom portion of the rendered text. In my case, I needed to serve the font files locally instead of using Google Fonts. To do this I:
Converted the font from .ttf to webfont files with Font2Web
Served the font files locally as static file assets from the localhost
Included fonts in my css with the bulletproof #font-face implementation
This eliminated my cut off rendered text issue.

Convert Arabic TTF/OTF fonts to woff, eof?

First I know there are similar questions to mine,
and I do tried Font Squirrel Generator for tons of Arabic fonts, all of them render text in English correctly but none of them worked with Arabic letters!!
so is there a desktop tool (since all web apps is not working) than can convert Arabic fonts without breaking them ??
I have purchased an Arabic font, and I just want to convert it so I can use it on the web, and I did not like the idea to pay subscriptions to some fancy websites like fonts.com each month to provide me with these fonts !
and in case you're wondering about my CSS here you go:
/* CSS */
#font-face {
font-family: 'GESSTVBold';
src: url('arabic-3/ge_ss_tv_bold-webfont.eot');
src: url('arabic-3/ge_ss_tv_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('arabic-3/ge_ss_tv_bold-webfont.woff') format('woff'),
url('arabic-3/ge_ss_tv_bold-webfont.ttf') format('truetype'),
url('arabic-3/ge_ss_tv_bold-webfont.svg#GESSTVBold') format('svg');
font-weight: normal;
font-style: normal;
}
.ar {
font-family:"GESSTVBold";
}
<!-- HTML -->
<h1 class="ar">مرحبا بالخط العربي</h1>
Thanks
Hope it's not too late, try font2web .. worked for me perfectly, just save your html file with codepage-1256 encoding.
Switch the Font Squirell to Expert mode.
Then on Subsetting: choose either No subsetting or Custom subsetting
Sorted! :)
EDIT:
On custom subsetting you either need to tick your desired subset or type it in the input fields.
I tried to use the font Squirrel but there is no Arabic unicode support, and I tried to set the Unicode ranges: 0600-06FF,0FB50-0FDFF,0FE70- 0FEFE but the same problem in cutting arabic letters is still existed.
finally I tried the site http://everythingfonts.com/otf-to-woff and the result was great
I don't have any Arabic font on hand so you'll have to try it:
upload your font
choose expert
on the list of options you have subsetting - this cuts off unwanted characters to save bandwidth - try "no subsetting" (unless you know unicode ranges, and you want to specify them)
let me know if it worked.
I encountered some issues while converting Persian or Arabic Fonts. For instance, words became separated. So الیاس converted to ال‌ی‌ا‌س.
In order to compress Persian font appropriately, I have used transfonter website, and my configurations were as follows:
Family support checked
local rule unchecked
Fix vertical metrics unchecked
Base64 encode unchecked
Formats: WOFF and WOFF2
Hinting: Strip Hinting
Subset: Arabic
Unicode Ranges: U+0600-06FF
Font display: swap
The mentioned website could successfully convert 1.1 MB TTF to 166.1 KB WOFF2.

Resources