SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Question about @font-face for styling individual elements

    What I need to do is style some paragraphs and headings with custom font using @font-face
    How do I do that for individual elements? Is @font-face class? Do I need to specify class or id next to it
    in order to call for CSS rules for element I want to stylize?

    Thanks.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,191
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    AFAIK @font-face gets the font (hopefully*) and then you can use it like others. eg. https://developer.mozilla.org/en-US/...CSS/@font-face
    HTML Code:
      <style type="text/css" media="screen, print">
        @font-face {
          font-family: "Bitstream Vera Serif Bold";
          src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
        }
        
        body { font-family: "Bitstream Vera Serif Bold", serif }
      </style>
    *in this example serif is the fallback in the font stack in case it doesn't load.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Mittineague View Post
    AFAIK @font-face gets the font (hopefully*) and then you can use it like others. eg. https://developer.mozilla.org/en-US/...CSS/@font-face
    HTML Code:
      <style type="text/css" media="screen, print">
        @font-face {
          font-family: "Bitstream Vera Serif Bold";
          src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
        }
        
        body { font-family: "Bitstream Vera Serif Bold", serif }
      </style>
    *in this example serif is the fallback in the font stack in case it doesn't load.

    Oh so it does not make that font default for all, but just registers it in CSS of website so using defined name (do you define it?) it can be applied individually.

    Thanks!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by TechnicGeek View Post
    Oh so it does not make that font default for all, but just registers it in CSS of website so using defined name (do you define it?) it can be applied individually.

    Thanks!
    Yes once the browser has downloaded the new font you just use it like you would for any other font (e.g. Arial or verdana). Nothing will get the new font by default until you apply it to something using the font's defined name (as Mittineague has shown above).


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •