CSS Fonts: Howto Convert Multiple Ttf Files into One File

CSS Fonts: Howto convert multiple TTF files into one file?

You can't do it, each font needs it's own separate file. You can use a service to convert a ttf to eot, and svg files and then use some code like this in your style.css (assuming that's the name of your stylesheet) file:

@font-face {
    font-family: 'FuturaM';
    src: url('fonts/FuturaMedium.eot');
    src: url('fonts/FuturaMedium.eot?#iefix') format('embedded-opentype'),
         url('fonts/FuturaMedium.ttf') format('truetype'),
         url('fonts/FuturaMedium.svg#FuturaMedium') format('svg');
}

Hope this helps!

How to add multiple font files for the same font?

The solution seems to be to add multiple @font-face rules, for example:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

By the way, it would seem Google Chrome doesn't know about the format("ttf") argument, so you might want to skip that.

(This answer was correct for the CSS 2 specification. CSS3 only allows for one font-style rather than a comma-separated list.)

Multiple font-weights, one @font-face query

Actually there is a special flavor of @font-face that will permit just what you're asking.

Here's an example using the same font-family name with different styles and weights associated with different fonts:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

For a full overview of this feature and the standard use take a look at this article.

EXAMPLE PEN

Use multiple custom fonts using @font-face?

You simply add another @font-face rule:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.ttf');
}

If your second font still doesn't work, make sure you're spelling its typeface name and its file name correctly, your browser caches are behaving, your OS isn't messing around with a font of the same name, etc.

how to use two kinds of font-family in one page?

The answer of Code Lord is the correct one but always try to convert your fonts for each browser:

English:

@font-face {
    font-family: 'english';
    src: url('english.eot');
    src: url('english.eot?#iefix') format('embedded-opentype'),
         url('english.woff2') format('woff2'),
         url('english.woff') format('woff'),
         url('english.ttf') format('truetype'),
         url('english.svg#english_medregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Chinese:

@font-face {
    font-family: 'chinese';
    src: url('chinese.eot');
    src: url('chinese.eot?#iefix') format('embedded-opentype'),
         url('chinese.woff2') format('woff2'),
         url('chinese.woff') format('woff'),
         url('chinese.ttf') format('truetype'),
         url('chines.svg#chinese_medregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

You can convert your fonts with this tool: http://www.fontsquirrel.com/tools/webfont-generator

Packaging multiple weights into one web font

Set the font-weight and font-style properties accordingly in your @font-face calls (instead of FontSquirrel's default output where all of them are set to normal and they have separate names for each weight/style instead), and name them all the same font.

Here's an example from a site I built last year:

@font-face {
    font-family: 'CartoGothic';
    src: url('library/fonts/CartoGothicStd-Book-webfont.eot');
    src: url('library/fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('library/fonts/CartoGothicStd-Book-webfont.woff') format('woff'),
         url('library/fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'),
         url('library/fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CartoGothic';
    src: url('library/fonts/CartoGothicStd-Bold-webfont.eot');
    src: url('library/fonts/CartoGothicStd-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('library/fonts/CartoGothicStd-Bold-webfont.woff') format('woff'),
         url('library/fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'),
         url('library/fonts/CartoGothicStd-Bold-webfont.svg#CartoGothicStdBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'CartoGothic';
    src: url('library/fonts/CartoGothicStd-Italic-webfont.eot');
    src: url('library/fonts/CartoGothicStd-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('library/fonts/CartoGothicStd-Italic-webfont.woff') format('woff'),
         url('library/fonts/CartoGothicStd-Italic-webfont.ttf') format('truetype'),
         url('library/fonts/CartoGothicStd-Italic-webfont.svg#CartoGothicStdItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'CartoGothic';
    src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot');
    src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('library/fonts/CartoGothicStd-BoldItalic-webfont.woff') format('woff'),
         url('library/fonts/CartoGothicStd-BoldItalic-webfont.ttf') format('truetype'),
         url('library/fonts/CartoGothicStd-BoldItalic-webfont.svg#CartoGothicStdBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

Note that FontSquirrel doesn't automatically generate code this way for a reason - which is that some older browsers / user agents do not support font-weight and font-style properties inside of @font-face declarations, so it's more backwards compatible to use the method where you name the fonts differently for each weight and style (CartoGothicRegular, CartoGothicBold, CartoGothicItalic, CartoGothicBoldItalic and so forth).

Also, FontSquirrel actually can do this for you - if you click Expert settings in the Webfont Generator, there is an option under "CSS" called Style Link which will output them in this format.

Is there a benefit to using multiple font file type sources when declaring a font-face?

The different file types are for different browsers.

Here is a nice overview:

Source: CreativeMarket

How do I convert Google fonts .ttf file to other file to types to support all the browsers

Google does not provide the other formats but neither you need to convert them yourself. You can download all font formats including X-Browser-CSS at http://localfont.com/

@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: normal;
  src: url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot');
  src: url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot?#iefix') format('embedded-opentype'),
       local('Open Sans'),
       local('Open-Sans-regular'),
       url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2') format('woff2'),
       url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'),
       url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
       url('http://fonts.gstatic.com/l/font?kit=cJZKeOuBrn4kERxqtaUH3Zbd9NUM7myrQQz30yPaGQ4&skey=62c1cbfccc78b4b2&v=v13#OpenSans') format('svg');
}

How can I convert OTF/TTF files to EOT format?

Use the Font Squirrel Generator - this will produce not just EOT, but also SVG and WOFF formats, and converting multiple font files at once, and providing everything in a single archive along with the relevant CSS.


Related Topics

CSS for Slant Diagonal Line

CSS Border Rotation

Clearing Nested Floats

How to Change CSS of Columns - Reacttable

Do Unused CSS Styles Affect Load Times

Bootstrap - About Fonts Files (.Eot .Svg .Ttf .Woff and .Woff2) Roles and Usages

Set Div Width to Content Without Inline-Block and Keep Divs Under Each Other Center Aligned

Ror App: "The Asset 'Application.CSS' Is Not Present in The Asset Pipeline" After Moving to Production Server

CSS - Floating Two Elements Side by Side

How to Style Radio Buttons with Different Colors

How to Add CSS to Vaadin/Maven Project

Slide Flickering with CSS Transitions

Strange Rendering Issues Ie11

Material-Ui-Next: Setting Image Size to Fit a Container

What Is The Biggest Cons to Use Position: Absolute & Top/Left Over Float & Margin+Padding, If Site Is Fixed Width (970Px), Centered

Actionview::Template::Error (Variable @Fontawesomeeotpath_Iefix Is Undefined)

Webkit CSS Pseudo Elements for Time Field

Adding New Theme to ASP.NET MVC 5 Dont Work


Leave a reply



Submit