• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 488
  • Last Modified:

how to create a similar font using CSS

I am trying to create a similar h1style as on this page

http://xiaothemes.staging.wpengine.com/architect/works/

 (<h1>Works</h1>)  but for some reasons struggling, though I have installed the font "Open Sans". Can any expert kindly help with CSS to create this font?
0
mmalik15
Asked:
mmalik15
1 Solution
 
Sam66Commented:
Hi,

You could use google web fonts to achieve this without having to install the font. Have a look here : http://www.google.com/webfonts/specimen/Open+Sans 

Here's an example that works :

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
h1, h2, h3, h4, h5, h6 {
            color: #474747;
            font-family: "Open Sans", "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
            font-weight: bold; }
      h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
      h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
      h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
      h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
      h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
      h5 { font-size: 17px; line-height: 24px; }
      h6 { font-size: 14px; line-height: 21px; }
</style>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>

Hope that helps!

Sam.
0
 
mmalik15Author Commented:
thanks for the comment but I am still struggling to get the exact same size as on the link

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
h1, h2, h3, h4, h5, h6 {
            color: #474747;
            font-family: "Open Sans", "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
            font-weight: bold; }
      h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
      h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
      h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
      h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
      h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
      h5 { font-size: 17px; line-height: 24px; }
      h6 { font-size: 14px; line-height: 21px; }
      
       h1 {
text-transform: uppercase;
font-size: 13px;
font-weight: bold;
line-height: 18px;
margin: 0;
padding: 0;display: block;
}

h1, h2, h3, h4, h5, h6 {
color: #474747;
font-family: "Open Sans", "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
font-weight: bold;-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
</style>
</head>
<body>
<h1>WORKS</h1>
</body>
</html>

Open in new window

0
 
HagayMandelCommented:
Here is a working sample
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now