Adding custom font to website (HTML/CSS) - html

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

Related

Font-Family does not change

I have downloaded the Twitch font, which is Twitchy.TV.
I'm trying to use it, but when I type the font, it doesn't recognize it.
I think it might be because Twitchy (.) TV. The period is messing it up.
I have tried putting it with "" or ''.
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCH</h1>
</div>
</div>
.left h1 { font-size: 22px; color: #fff; font-family: Twitchy.TV; }
Have you included a #font-face declaration in your CSS?
Nowadays the best format for using fonts on the web is .woff or woff2 files, if you don't have your font in this format there are a lot of web font converters available.
#font-face {
font-family: 'Twitchy.TV';
src: url('Twitchy.TV.woff2') format('woff2'),
url('Twitchy.TV.woff') format('woff')
}
(Assuming you have font files in the same directory as your stylesheet named Twitchy.TV.woff and/or Twitchy.TV.woff2)
If you're just testing the font during development and have it locally installed, you can specify a local installation like this:
#font-face {
font-family: 'Twitchy.TV';
src: local('Twitchy.TV');
}
Then you are able to use it like:
.left h1 {
font-family: 'Twitchy.TV';
}
Ensure that you have imported the font if it is from an external source!
If you have downloaded the font, make sure that you have added it to the list of font-families in your computer. This can be done in the Control Panel.
You need to import the font at the top of your CSS using #font-face. This allows you to use non-websafe fonts in your website. the src: url can be either a path in the local storage or on an external site.
#font-face {
font-family: "Twitchy.TV";
src: url("path/to/font.ttf");
}
You can use the font like this
.left h1 {
font-family: "Twitchy.TV";
}
first of all upload you font here https://transfonter.org/ and then you will have generated font prepared and add all your fonts to assets folder and in style.css or style.scss open downloaded folder from transfonter and copy what's inside stylesheets.scss and add to your style.css and then make sure to be correct path to fonts assets/fonts for exameple
#font-face {
font-family: 'Roboto';
src: url('Roboto-Black.woff2') format('woff2'),
url('Roboto-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
}
And then in style.css use it, example
h1 {
color: red;
font-family: 'Roboto', sans-serif; //Here you add default font in case the browser
can't find Roboto font
}

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;
}

#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.

How to detect differences between design and site?

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.

Slow rendering using "Sans-Serif"

I have a odd issue on my "in-development" website here: http://www.cphrecmedia.dk/musikdk/stage/
The H1-h6 fonts are just "sans-serif", but often in Chrome it shows another font (screenshot: http://cl.ly/image/260B0H0l1w0C). When the mouse hover the navigation it changes to the right font. FYI this is how it should look like: http://cl.ly/image/442l071M3N1B
The code used for font is:
.nm li a {
float: left;
font-family: sans-serif;
height:22px;
padding: 12px 14px 7px 14px;
color:#white;
font-size: 12px;
line-height: 20px;
}
I mainly develop using Chrome, so I'm not sure if the issue is present in other browsers. Have anyone of you seen this issue before?
'sans-serif' is not a font name it's a font family specification.
Use a sans-serif font name like "Arial" or "Verdana" or else you will have unexpected results (the browser may replace your font with generic ones).
Try using custom font method by downloading the font and keeping it in your fonts folder.
Example:
#font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{ font-family:myFirstFont; }
Try using custom web font from google:
http://www.google.com/fonts
Select a font and uses one of the three metods, i prefer CSS method.
Example:
#import url(http://fonts.googleapis.com/css?family=Roboto);
Import this in CSS and use this for you text: font-family: 'Roboto', sans-serif;