CODEWITHSUNDEEP
htmlcss
Marius
Marius

Reputation: 1281

How to detect differences between design and site?

I have this site:link I put an image to understand better

enter image description here

The difference bothers me more background and text size. Font used in photoshop is "ArchivoNarrow regular", this I put myself in the CSS code below

CODE CSS:

.details-footer{
  display: inline-block;
  width: auto;
  font-size: 9pt;
  color: white;
  font-family: ArchivoNarrow regular;
}

Can you tell me please from where all these differences and how can I fix?

Thanks in advance!

Upvotes: 0

Views: 44

Answers (2)

shanginn
shanginn

Reputation: 223

To add font, insert this in your index.php or whatever file, that containt links to your css files.
<link href='https://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'> You need to insert this above all other css links.

Then add following line to your css, where you need it:
font-family: 'Archivo Narrow', sans-serif;

For example, to apply this to the footer:
.details-footer { font-family: 'Archivo Narrow', sans-serif; }

Done!

P.S.: It's not a good idea to upload the font to your server, you should use Google Fonts when you can.

Upvotes: 1

Amy
Amy

Reputation: 1098

Have you defined the font? If not you do so like this:

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}

then you need to upload the .woff font file to your folder.

Upvotes: 0

Related Questions