How to detect differences between design and site? - html

I have this site:link
I put an image to understand better
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!

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.

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.

Related

Font Change In Different Devices

i use a font in my web page.there is not any problem in chrome and Firefox and IE in my computer but in other Devices the font changes.
Someone knows why this happens?
*{
font-family: Montserrat;
}
The font is installed in your system, therefore, it's not changed in your device. you need to add the font in your code.
e.g
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
add in the CSS file change the link with your require font
or if you have a font file then add the font file in the CSS as
#font-face { font-family: roboto-regular;
src: url('../font/Roboto-Regular.ttf'); }
h2{
font-family: roboto-regular;
}
You must define your font in your css file.
For Ex:
#font-face {
font-family: myFirstFont;
src: url(font-location);
}
* {
font-family: myFirstFont;
}
It is possible that some browsers/OS/Devices doesn't support that font.
Define multiple fonts.
* {
font-family: 'Montserrat', sans-serif;
}
Another solution can be download Google Web Fonts, upload them with your website and define them in the css files manually. Another way may be usage of JavaScript Web Font Loader instead of the default one.
In your Header:
<link href="https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap"
rel="stylesheet">
In your CSS:
#import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap');
.fontn{
font-family:'Caesar Dressing', cursive;
}

Adding custom font to website (HTML/CSS)

I am currently trying to add a custom font to my website but it wont seem to work, I am not very good atm programming but my friend isn't home so I just wanted to get a solution for him. It currently works if using Calibri as font but any custom downloaded fonts dosent work. He is trying to use the HelveticaNeue font. The font is located in a folder called "fonts" in godaddy's server folder thing. Thanks! :) Here is the code:
#font-face {
font-family: "HelveticaNeue";
src: url("fonts/HelveticaNeue.otf);
}
h1{
font-family: Calibri;
letter-spacing: 6px;
}
p{
font-family: Calibri;
letter-spacing: 1px;
}
Add a simple font-face
#font-face {
font-family: 'Typogrotesk'; /*a name to be used later*/
src: url('TheURLToTheFontFile'); /*URL to font*/
}
then use it from css, html and javascript like this
This is for css
.example {
font-family: 'Typogrotesk';
}
The best way that i use for all my custom font is to generate the neccessary code for my font using this fontsquirrel
You need url that directed to the font, and helvetica neue is paid font. Use web safe font font-family: Helvetica, sans-serif; is easiest way to load helvetica

#font-face won't work. how do I do this properly?

So I have this custom font and it won't work. Please help.
#font-face{
font-family: Anton;
src: url('../../assets/fonts/Anton-Regular.ttf')format('truetype');
}
.home-content-right h1{
font-size: 60px;
font-style: 'Anton',sans-serif;
}
#font-face {
font-family: myFont;
src: url(fonts/Akrobat-Bold.otf);
}
.h1{
font-family: "myFont";
}
For example, I put .otf font file in folder fonts, that works without problem. You will just change name of your font and source path.
A couple things could be happening.
First, your h1 tag is using font-style instead of font, so:
#font-face {
font-family: Anton;
src: url('../../assets/fonts/Anton-Regular.ttf')format('truetype');
}
.home-content-right h1{
font: 'Anton',sans-serif;
font-size: 60px;
}
i.e. font rather than font-style on the h1.
Also, it looks like its possible you are using Rails or some other framework based on the folder structure you are using. If so, its possible that the framework is digesting your asset (i.e. fingerprinting it so its Anton-Regular.ttf-02987910hsa or something like that in case it changes so your browser doesn't cache it incorrectly. If you are using Rails, you'll need to use asset-url('URL') in order to get the most recently fingerprinted asset.

Google Font #import + #font-face?

I'm trying to import fonts with Google Fonts with #import and #font-face, in my CSS. I used to only use #font-face with downloaded fonts, but since it takes time to load, I preferred to use the Google Fonts method.
I didn't wanted the "bold" version of Roboto as the "bold" font in my website, so I used #font-face. However, I'm not sure of the way to use it. Is this correct to use #import and #font-face like this?
#import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
#font-face
{
font-family: Roboto;
src: url("https://fonts.googleapis.com/css?family=Roboto:400");
}
#font-face
{
font-family: Roboto;
font-weight: bold;
src: url("https://fonts.googleapis.com/css?family=Roboto:500");
}
#font-face
{
font-family: Roboto;
font-style: italic;
src: url("https://fonts.googleapis.com/css?family=Roboto:400i");
}
#font-face
{
font-family: Roboto;
font-weight: bold;
font-style: italic;
src: url("https://fonts.googleapis.com/css?family=Roboto:500i");
}
I've the feeling I'm importing the fonts twice... but it doesn't even work! (The page displays the default browser font)
Thank you for reading and taking time to help me.
you can use like this in your stylesheet
#import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
h2{
font-family:Roboto;
}
#font-face make sense when you loading font from files on your server. If you importing from google, use only import and write right properties to elements you want.
#import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
h2 {
font-family:Roboto;
font-weight: 500;
}

How do I add Opan Sans .tff using CSS?

I want to use the OpenSans-Light.tff webfont that I downloaded off of Google Fonts. Here is what I am trying within my main.css:
#font-face {
font-family:"OpenSans";
src: url("fonts/OpenSans-Light.ttf");
}
.banner h1 {
font-family: "OpanSans", arial;
}
Though it's not working.
If you want to use just #import use it like this:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
or add this to your HTML <head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
and then add this to your CSS
.banner h1{font-family: 'Open Sans', sans-serif;}
The easiest (and arguably best way to do it) is simply use #import in your CSS.
Here's a JSFiddle I made for you: http://jsfiddle.net/gLej4h82/
CSS:
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
body {
font-family: 'Open Sans';
}
If you add
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
to the very top of your code in your css file and reference it on the certain object like the below it should work
.banner h1{
font-family:'Open Sans', sans serif;
font-weight: 400; /* 400 is regular, 300 is light, 700 is bold */
}
Use this service to generate the font face for you its very nice service.
http://www.fontsquirrel.com/tools/webfont-generator