Using variations of bold text in logo and navigation menu

Support Area Forums Authentic Using variations of bold text in logo and navigation menu

Viewing 2 posts - 1 through 2 (of 2 total)
URL to the page in question:
  • Author
    Posts
  • #15801
    Ricky Ponce
    Participant

    I was browsing google fonts and noticed they had variations of the Raleway font (bold and ultra bold) that I would like to use for my logo text and navigation menu. Is there a way that I can add these fonts to my website?

    Thanks a lot

    #15802
    Bill Robbins
    Moderator

    Ricky,

    It is possible to do that. Here’s how:

    1. Find the font you’d like to use at Google Fonts and then select to “use” it.
    2. In step 3 on that screen, you’ll see a few options for adding the code to your site. The code given in the “standard” option will look something like this:
      
      <link href='http://fonts.googleapis.com/css?family=Raleway:700' rel='stylesheet' type='text/css'>
      

      Copy the URL out of that line, in this case it’s http://fonts.googleapis.com/css?family=Raleway:700 and paste it into another browser window.

    3. You should see just a bit of code that looks similar to this:
      
      @font-face {
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 700;
        src: local('Raleway Bold'), local('Raleway-Bold'), url(https://themes.googleusercontent.com/static/fonts/raleway/v6/JbtMzqLaYbbbCL9X6EvaI73hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
      }
      

      Copy that code.

    4. Go to the Theme Options page and select the Styling tab.
    5. Scroll down to the Custom CSS box and paste that code and then add this below that:
      
      #text-logo p,
      #text-logo h1 {
           font-family: 'Raleway', sans-serif;
      }
      

      and update your settings.

    That should let you use the new font and weight on your site. You don’t want to add too many fonts as they will slow down your site’s loading time. If you have any questions or trouble, just let me know.

    Thanks,
    Bill

Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘Using variations of bold text in logo and navigation menu’ is closed to new replies.