I am using custom wordpress theme and I wanted to change the font. To do that I found the style.css file, and then replaced the current #font-face code with mine, so that I can use the "Stylo" font. This is the code I am using:
#font-face {
font-family: 'stylo_bold';
src:url("stylo_.eot?") format("eot"),url("stylo_.woff") format("woff"),url("stylo_.ttf") format("truetype"),url("stylo_.svg#Stylo-Bold") format("svg");
font-weight:normal;
font-style:normal;
It works fine, except that when I type on cyrillic the font doesn't work and instead the cyrillic text is showed in some default font (Myrad Pro or something). This font has support for the cyrillic letters, so can you point me in the right direction here? I don't understand why it doesn't work? Thank you.
You answered your own question.
This font has support for the cyrillic letters...
Many fonts only support english language. A lot of websites will show you a character breakdown or specifically list support for cyrillic alphabet. You must be mistaken or be misinformed in regard to the font in question.
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!
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'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.
I feel like a muppet for asking this but how can i get Futura Condensed Extra Bold to show up in CSS.
Before someone says it, yes I am aware that those Windows people out there wont be able to see it but this is for the Mac community, anyway at this stage i can't even see it and I have the font installed on my system.
So I have tried so many variations of this phrase but none work. I've tried with and without quotes, spaces, dashes, all sorts but it's still not working.
font-family: "Futura-CondensedExtraBold", sans-serif;
Here is a screenshot of the installed font, as you can see the name i used matches the PostScript name too.
Screenshot of Font Book
Most people who are using Futura on the web are loading through services like Typekit. So if you are seeing this typeface frequently on sites you like it is for this reason. I recommend trying that service or one similar so everyone can see it. I believe there is a free personal one and it is just a script install. Then your
font-family: "Futura-CondensedExtraBold", sans-serif;
would work. Just check what Typekit uses to load this. I believe there's would be
font-family: "futura-pt-condensed", sans-serif; font-weight: 600;
https://typekit.com/fonts/futura-pt-condensed
Probably the name is not the one under which browsers know it. This may differ from the PostScript name. Try using a tool for listing installed fonts (see its explanations) to determine the name. My guess is that it might be "Futura Condensed ExtraBold".
Font names are also notoriously inconsistent, so that might be one problem. Have you tried #font-face? It's a more reliable way of referencing non-standard fonts. Head on over to http://www.fontsquirrel.com/fontface/generator
You'll need an OTF or TTF of your font. It'll do the rest for you and zip up a demo and the converted fonts.
Had a similar issue myself. In Firefox you may need to use just "Futura" with font-stretch and font-weight properties. Webkit/Blink recognize the hyphenated font. This has worked for me cross browser on a Mac:
font-family: "Futura-CondensedExtraBold", Futura, sans-serif;
font-stretch: condensed;
font-weight: bold;
Email web clients strip out css, so do test it.
Aside from the iconic Futura Condensed Extra Bold, they also use Trade Gothic Condensed Bold on headings at nike.com
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.