Maybe somebody did do this:
I have several files for one font for each style (regular,bold, italic, italc-bold)
font-italic.ttf
font-bold.ttf
font-regular.ttf
How can I merge it to one file, to use in one font-face in CSS?
You cannot. A single font file describes the glyphs used for a particular font in a particular style.
While you could probably merge them and use Stylistic Sets to refer to the different fonts that is something you cannot do in CSS (and most other applications neither). Apart from that (and things like Arabic) there is (as far as I know) no straightforward way to have different glyphs for the same code points in a font file.
Related
So I have a font pack for example Font-Awesome.
They provide me with different file types like eot, woff, woff2, or svg. Now as per what I've read, We just need a single file for a specific font weight to work.
All I want to ask is, If we just add a single font file where font-weight isn't applicable, like Font-Awesome or Simple Line icons, what are the issues that we end up facing?
WOFF2 has nearly universal support right now, so you don't need to include the rest unless you want to get those last few percentage points of users who are on older browsers.
in my web project I need to mix latin and cyrillic characters. Unfortunately the cyrillic characters are not part of the webfont, thus the fallback steps in.
As I use a bold webfont the latin characters are bold but the fallback would only be bold, if I set the whole paragraph as font-weight:bold or alike.
I remember discussions that this should be prevented as some browsers can't display them correctly, but during my tests I wasn't able to produce a really broken layout when bolding the webfonts.
What do you think? How can I solve this problem?
Thank you
Markus
Yes, most webfonts provide specific weights like 400 for Regular and 700 for bold. If these aren't provided and you bold/strong them, you are in essence using the font outside of its original intent.
Font weight values can be used, but I'd always stick with the ones provided with the webfont you're using.
Also, if a weight you declare is not available, it will not show on the page but simply default the "logically closest" (this from the CSS Tricks article below) weight.
See a little more basic description here: https://css-tricks.com/almanac/properties/f/font-weight/
Yes it's still recommended you don't do this.
By using font-weight:bold you're forcing the browser to try and create the bold version of this font itself, which can often look distorted / fuzzy. This is referred to as faux styling.
You should set different #font-face definitions with different font-weight values which make use of multiple font files.
I'm looking for a strategy for dealing with font-family availability.
I have sites using OTFs EOTs but for one reason or another, the font won't load for various devices/platforms and the font falls back to the 2nd or 3rd choice. Unfortunately, the fallback rarely has the same line-height or margins. I've used jQuery to adjust the CSS accordingly, but that's a lot of effort for anything but a very small style sheet. I'm wondering if there isn't a better strategy.
Or... if there's a way to troubleshoot -why- a Google Font or EOT or OTF won't load and perhaps cut down on those cases?
I realise one can use Google fonts and so on, but those are IMHO... forgive me... mostly -dreadful- looking.
Different browsers use different formats for fonts. For example, IE uses .eot files where as other browsers use .otf, .ttf, or even svg. Your best bet is to store multiple types of a font that would want to use and then declare them all in the #font-face block.
A good article about this can be found: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
Maybe somebody did do this:
I have several files for one font for each style (regular,bold, italic, italc-bold)
font-italic.ttf
font-bold.ttf
font-regular.ttf
How can I merge it to one file, to use in one font-face in CSS?
You cannot. A single font file describes the glyphs used for a particular font in a particular style.
While you could probably merge them and use Stylistic Sets to refer to the different fonts that is something you cannot do in CSS (and most other applications neither). Apart from that (and things like Arabic) there is (as far as I know) no straightforward way to have different glyphs for the same code points in a font file.
I'm using Dreamweaver for many years which gives some suggestions to put font-families in CSS.
Is it not a font-stack? What is new in the term "CSS Font Stack"
What I know is, that one defines multiple font families to keep the typography consistent if any font is not available in system.
You are correct - You define multiple fonts and the browser will simply choose the first one in the list that you have on your system.
A font stack allows you to define multiple fonts to essentially provide a better experience for users.
Using the CSS font-family property, you can define multiple fonts, like so:
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
This reads from left to right, if the user does not have Arial then font-family will fallback on Liberation all the way down to the most basic sans-serif (select any sans-serif font if the aforementioned fonts are not found).
font stack, is just a list of fonts (of font families), if the first is not available to the browser, then the second is used etc..
your picture shows 6 font stacks, you could choose from
there's nothing new, this has been the standard way to set fonts for some years now.
You are correct in your thinking. The pulldown menu has 'Web Safe' font stacks to choose from. If you use any of them your text should render fairly consistently on all devices and on all browsers.
The trend now is to use Google Fonts or some other imported or loaded fonts and thereby control what is rendered. Even then it is recommended to also include one or more alternative standard fonts in a font stack in case your visitors cannot load Google Fonts or the other choices you provide.