Using variations of bold text in logo and navigation menu
URL to the page in question:
-
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
Ricky,
It is possible to do that. Here’s how:
- Find the font you’d like to use at Google Fonts and then select to “use” it.
- 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.
- 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.
- Go to the Theme Options page and select the Styling tab.
- 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
- The topic ‘Using variations of bold text in logo and navigation menu’ is closed to new replies.