发表新帖
发表新帖

How can I use Google's Roboto font on a website?

前端 未结
关注
13 876
旧巷少年郎
旧巷少年郎 2020-12-12 10:23

I want to use Google\'s Roboto font on my website and I am following this tutorial:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

<
相关标签:
13条回答
  • 滥情空心
    2020-12-12 10:58

    It's actually quite simple. Go to the font on Google's website, and add its link to the head of every page you want to include the font.

    0 讨论(0)
  • 一生所求
    2020-12-12 11:01

    Old post, I know.

    This is also possible using CSS @import url:

    @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}
    0 讨论(0)
  • Happy的楠姐
    2020-12-12 11:02

    it's easy

    every folder of those you downloaded has a different kind of roboto font, means they are different fonts

    example: "roboto_regular_macroman"

    to use any of them:

    1- extract the folder of the font you want to use

    2- upload it near the css file

    3- now include it in the css file

    example for including the font which called "roboto_regular_macroman":

    @font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

    watch for the path of the files, here i uploaded the folder called "roboto_regular_macroman" in the same folder where the css is

    then you can now simply use the font by typing font-family: 'Roboto';

    0 讨论(0)
  • 一个人的身影
    2020-12-12 11:03

    Use /fonts/ or /font/ before font type name in your CSS stylesheet. I face this error but after that its working fine.

    @font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
    0 讨论(0)
  • 梦如初夏
    2020-12-12 11:05

    There are TWO approaches that you can take to use licensed web-fonts on your pages:

    1. Font Hosting Services like Typekit, Fonts.com, Fontdeck, etc., provide an easy interface for designers to manage fonts purchased, and generate a link to a dynamic CSS or JavaScript file that serves up the font. Google even provides this service for free (here is an example for the Roboto font you requested). Typekit is the only service to provide additional font hinting to ensure fonts occupy the same pixels across browsers.

    JS font loaders like the one used by Google and Typekit (i.e. WebFont loader) provide CSS classes and callbacks to help manage the FOUT that may occur, or response timeouts when downloading the font.

        <head>
      <!-- get the required files from 3rd party sources -->
      <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

      <!-- use the font -->
      <style>
        body {
          font-family: 'Roboto', sans-serif;
          font-size: 48px;
        }
      </style>
    </head>
    1. The DIY approach involves getting a font licensed for web use, and (optionally) using a tool like FontSquirrel's generator (or some software) to optimize its file size. Then, a cross-browser implementation of the standard @font-face CSS property is used to enable the font(s).

    This approach can provides better load performance since you have a more granular control over the characters to include and hence the file-size.

        /* get the required local files */
    @font-face {
      font-family: 'Roboto';
      src: url('roboto.eot'); /* IE9 Compat Modes */
      src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('roboto.woff') format('woff'), /* Modern Browsers */
      url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
    
    /* use the font */
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }

    Long story short:

    Using font hosting services along with @font-face declaration gives best output with respect to overall performance, compatibility and availability.

    Source: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

    UPDATE

    Roboto: Google’s signature font is now open source

    You can now manually generate the Roboto fonts using instructions that can be found here.

    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-12 11:05

    Did you read the How_To_Use_Webfonts.html that's in that zip file?

    After reading that, it seems that each font subfolder has an already created .css in there that you can use by including this:

    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
    0 讨论(0)
 看不清?
提交回复
热议问题