I am building my first website and I would like to use Monserrat Black.
When I'm typing the classic "font-weight: 900; in my CSS file" the result is obviously bolder Thant the "regular", but not as bold as it should be, comparing to what I see when I look at it in, let say Adobe Illustrator (AI).
I have written the following code in the HTML file
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
And this in the CSS (as mentioned in this page : How do I set 'semi-bold' font via CSS? Font-weight of 600 doesn't make it look like the semi-bold I see in my Photoshop file)
{
font-family: "Montserrat";
text-align: left;
}
.titreSection
{
font-weight: 900;
}
The font produced in my web browser:
The font as it should appear (screenshot taken in AI):
Is there a way to easily select Black, Thin, Thin Italic, Semibold etc. into CSS ?
Thank you ivre much for you patience, this is my first website...
When importing fonts from Google Fonts, you can customize the options you want. Some fonts will have different options. In your case, here is a screenshot of how that "customize" page looks like:
By doing that, your import snippet will be different when you go back to the "Embed" tab. To include the 900 weight, you should import the font like this:
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,900&display=swap" rel="stylesheet">
For the second question
"Is there a way to easily select Black, Thin, Thin Italic, Semibold etc. into CSS ?"
by adding the correspondent options in the Google Fonts, you could also set your css with font-weight: bold or font-weight: bolder or font-weight: lighter...
See this link for the full reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Related
The main text ("Elegance is sublime.") for the site doesn't have quite the right font for some reason. I am looking at my design and live version and they are different.
The head-scratching issue for me is, unless the font is distorted why does it look different. Sizing aside the font is clearly different. Suggestions?
https://github.com/marcoantonio123456/Studio
Live version
How it should be
#font-face {
font-family: 'Stem-Regular';
src: url('components/typefaces/Stem-Regular.ttf') format('ttf'),
}
.headline-top { position: relative;
font-family: 'Stem-Regular', sans-serif;
font-size: 7.8em;
letter-spacing: 0.8px;
left: 90px;
top: 350px;
z-index:1;
The head-scratching issue for me is, unless the font is distorted why does it look different. Sizing aside the font is clearly different. Suggestions?
Summary:
The font you have is not Stem Regular. Despite the file name claiming to be so.
Details:
The font in your (correct) screenshot is not the same font as on your website. Your website correctly displays the 'Stem-Regular' font as loaded from 'components/typefaces/Stem-Regular.ttf' . Whether this is actually the font with this name, is doubtful.
I have copied your font and used it on a word document and the font displays as your website does. There is nothing wrong with you code or the loaded font file.
The font you have - according to several online font depositories - is NOT the same as Stem Regular, or Stem Regular W03.
You can view Stem Regular W03 here: Fonts.com, Online Web Fonts note the a character is different to your website.
Solution:
Find the correct Stem Regular from another depository or chase up whoever you got this font from. We can not help you as this is not a code issue.
I am new to HTML5 coding, and i am looking to create a very basic website.
I've been searching on the internet for a few hours wondering how i can use a custom font on a webpage through a font file (.tff) and i came out short of solid answers. All i can conclude is that i require a style.css file of some sort with information of the font i wanna use.
While i am still unable to figure out how i can get the font to display on my webpage, what i really don't know is how i can use 2 different custom fonts on a webpage.
Of all the vague answers i could find on the internet, they only tell me how to use a single font for a webpage, however i would like to use 2 different fonts for different paragraphs and such.
I still cannot figure out how to do so, what i could find teaches me how to do so in CSS format, though i am using HTML format (specifically 5).
I would like some help on how i can use 2 custom fonts in a webpage for different paragraphs and how i can have these fonts display when i open the .html file on my browser. I would appreciate the help.
You have to use CSS to do that. That CSS can embedded in your html under your tag
<html>
<head>
<style>
#font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
#font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
#font-face { font-family: Delicious2; src: url('Delicious2-Roman.otf'); }
#font-face { font-family: Delicious2; font-weight: bold; src: url('Delicious-Bold.otf');}
</style>
</head>
Then you can reference these fonts in your html
<font face="Delicious">This is some text!</font>
Check these two posts for more details
How do I install a custom font on an HTML site
https://www.w3schools.com/tags/att_font_face.asp
You need to first host the font on the website (put the TTF file in a folder beside your HTML files), then use CSS to apply it to the elements (Ex: your paragraphs, headers, etc.). Using this method, you can use two, three, or however many different fonts you like.
W3Schools is sometimes really helpful, and this is an occasion where they are. I can elaborate more on this later.
I believe all you want is to apply different font styles on your web page. First, host your fonts in your project and use CSS class to change font family to any section of the web page you like.
<div style:'font-family: fantasy'>This is font style 1</div>
<div style:'font-family: cursive'>This is font style 2</div>
The <head> tag in my html file contains this link call:
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
Then I go on to say:
<style>
body {
font-family: 'Lato', sans-serif;
}
.textTime {
font-weight: 700;
}
</style>
Then my body goes on to say this:
<div class="textTime">
from 6am to 6am
</div>
It gets rendered like so:
However, if I change the font-weight property to font-weight: 400; instead of 700, it gets rendered like so:
So my problem is, the font is getting rendered as Lato, only if the weight is 400, not 700, then it gets rendered as something else.
The way it's doing this is because it's using CSS2, not CSS3, and I can't change this.
How can I solve this issue?
When using custom font's you need to add each font type for each weight you are going to use.
The reason you are seeing a broken version of Lato or another font is you either have another font defined for those font weights or you are seeing the browsers render version of Lato which will be based on the Lato 400 and up or down scaled depending and it will look nothing like how you intended.
I am trying to use font Orator Std but it does not appear corretly.
more,
when I tested the code on local server, font size was near to what I want in image here, when tested on jsfiddle, font size changes for element and position also change. any reason for this?
why hr does not appear in yellow
How to last to character in vuvua specific color?
JSFIDDLE : http://jsfiddle.net/ewGXv/
I want my page to look similar to :
The problem you have is that the font is not a standard font available on any system. To include a non-standard font you will to reference that font and force it be downloaded if not available.
For example, to use a font from Google's Font API you can:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'PT Sans Narrow', sans-serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Sample text</div>
</body>
</html>
If you specifically need Orator and it is not available for hosted loading at a service like Google's Font API, then you will need to download and host it yourself.
ADDED:
Although not perfect this is 90% of what you need. I'll leave you to tweak the layout and styling to your needs. A rough example of the layout
Andy
As I mentioned in the title, when using css font-family, custom font (font-face), it messes up (black background, black text (I guess)) auto complete drop down list in Opera.
input[type='text'], input[type='password'], input[type='email'], input[placeholder] {
font-size: 1.2em;
font-family: sans-serif;
color: #2A873A;
padding-left: 25px;
}
Code above works fine, but if I replace "font-family: sans-serif;" with some font-face font (google web fonts too), then problem starts.
Here is the screenshot of "bug" in action.
P.S. I should mention that that is Opera's native autocomplete, not custom js, dropdown list.
EDIT:
http://jsfiddle.net/burCR/
Have you tried specifying the font directly in your css? for example:
div.magicsomething {font-family:CustomFont,Customfont2,sans-serif;}
Keep in mind nested elements get stuck with custom fonts, so if you don't do the above, you may also very well need font-family:inherit in your 'nested elements'.
For extra help, please mention the name of the custom font, your full css and a live link to your site
Although this may be something obvious, check to make sure that your font is compatible with Opera. Here is a list of some web safe fonts.
http://www.w3schools.com/cssref/css_websafe_fonts.asp
And if that doesn't work try taking the font you want from microsoft word and use #fontface to insert you custom font instead of using a websafe one.
And finally try using your font-family on the form and have the input inherit the font.
Hopefully this helped.
Ditto to specifying the font directly. You may also want to try using base64 encoding, which in my experience works beautifully and with great cross-browser compatibility.
You can specify colors for both the background and the text individually.
input {
background-color: white;
color: black;
font-family: "My Fontface Font", Verdana, ms serif;
}