Font consistency in a textarea - html

How do I make a textarea have the same font as everything else on the webpage?
Currently I have my code:
test.html:
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="testarea">
<textarea></textarea>
</div>
</body>
</html>
test.css:
body { font: 100%/120% Verdana, Arial, Helvetica, sans-serif;}
#testarea textarea { width: 30em;height: 7em;font: inherit;}
Font inherits in Mozilla, but IE7 keeps Courier inside the textarea.
UPD: Apparently inherit does not work in IE for textarea, so I'll go with AlbertoPL's method.

Simply create a textarea element and define your font element there.
textarea { font: 100%/120% Verdana, Arial, Helvetica, sans-serif;}
you can move it out of the body element.
You'll have to define the font twice (once in body and once in textarea) if you don't want to use *.

Related

html does not respect the font-family set in a style

I have reduced my problem to a trivial example:
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="utf-8" />
<style>
body,
h1,
h2,
h3,
h4,
h5 {
font-family: 'Times New Roman', sans-serif
}
body {
font-size: 16px;
font-family: sans-serif;
}
</style>
</head>
<body>
<a> a simple text w </a>
<h1> a simple h1 text w </h1>
<h2> a simple h2 text w </h2>
</body>
</html>
Which I would expect to produce three lines of sans-serif text. The web inspector indicates that all three lines should be sans-serif.
Tested on Chromium and Firefox, I get three lines of text, one sans-serif, and two more, for h1 and h2 in serif font:
What is the explanation of this behavior? What is my misunderstanding of the way font appearances are inherited and applied?
Since you declared Times New Roman for both, the h1 and the h2 elements, they both render with this font.
And since the last definition in CSS has a higher order than the first one, the a elements inherits the style set for the body selector, which is: sans-serif.
This is not an issue, it is as expected.
If you would wrap the <a></a> element inside a (for example) <h3></h3>, you will see, that it will inherit the styles from its parent and displays as serif Times New Roman as well.
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="utf-8" />
<style>
body,
h1,
h2,
h3,
h4,
h5 {
font-family: 'Times New Roman', sans-serif
}
body {
font-size: 16px;
font-family: sans-serif;
}
</style>
</head>
<body>
<a> a simple text w </a>
<h1> a simple h1 text w </h1>
<h2> a simple h2 text w </h2>
<h3>
<a> a simple text w </a>
</h3>
</body>
</html>

How to use SourceSansPro to match design cross browsers

I used SourceSansPro to match the font in design, FF, Safari seem ok. Chrome and IE 11 have issue.
Here is the design for the font (due to proxy, cannot upload, but have a look at FF and Safari)
Here is code:
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet"
type="text/css"
/>
<style>
.fontStyle {
font-style: normal;
font-size: 16px;
font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
color: #000;
font-weight: 500;
}
</style>
</head>
<div class="fontStyle">
Drop a file here
</div>
</html>
It seems the bold is quite different in IE and Chrome.
In summary, need to make the font style in IE and Chrome, same as FF and Safari.
By default, the code you're using there only include the 400-weight font, and browsers have different reactions when trying to get a bold version of a lighter font - some make it bold themselves, or just load a different font. In order to load the font weights you want (along with italic versions), you can use a line like this:
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
With the versions/weights separated with commas.
If you go to the Google Font page for this, you can click "Customize" to select which fonts to include, and it'll generate the embed code for you.
You can use this code
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet" type="text/css" />
<style>
.fontStyle {
font-style: normal;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
color: #000;
font-weight: 500;
}
</style>
</head>
<div class="fontStyle">
Drop a file here
</div>
</html>

#font-face and #font-family not working

I am trying to make something really simple: add 3 fonts to an html page.
I have looked at tons of examples but none have solved my problem. Maybe I am lacking something in the way it is written. I am actually not sure.
My html:
<html>
<head>
<title>Fuentes</title>
<link type="text/css" rel="stylesheet" href="Fuentes.css">
</head>
<body>
<p class="a">This is a paragraph, shown in Roboto font.</p>
<p class="b">This is a paragraph, shown in Bellefair font.</p>
<p class="c">This is a paragraph, shown in the Kavivanar font.</p>
</body>
</html>
And my .css:
#font-face {
font-family: "Roboto";
src: url(https://fonts.google.com/specimen/Roboto) format("truetype");
}
#font-face {
font-family: "Bellefair";
src: url(https://fonts.google.com/specimen/Bellefair) format("truetype");
}
#font-face {
font-family: "Kavivanar";
src: url(https://fonts.google.com/specimen/Kavivanar) format("truetype");
}
p.a {
font-family: "Roboto", Roboto, sans-serif;
}
p.b {
font-family: "Bellefair", Bellefair, sans-serif;
}
p.c{
font-family: "Kavivanar", Kavivanar, sans-serif;
}
That's definitely not how to use Google fonts... You're not even linking to an actual font, you're linking to the support page.
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
First go to the page: https://fonts.google.com/specimen/Roboto
Then click this:
Then it will create a little box in the corner. Click that box, and you will see this. Now you have the actual code:
You should add stylesheet link in your html for each google font you want to use. eg
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
for roboto font in your html and then use font-family: 'Roboto', sans-serif;in your css.

Can't get google font to work

I have looked through other peoples answers to the question and followed the instructions on google and just cannot get it to work. Here is what I have used.
#import url('https://fonts.googleapis.com/css?family=Archivo+Black|Playfair+Display:400,700i,900');
The worst part is that Playfiar Display is working fine, Archivo is not at all.
For reference, georgialee.design is the URL. (works on every browser except for internet explorer)
Thank you so much! I'm sure it'll be some silly mistake :)
In header section you import it
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
or
<style>
#import url('https://fonts.googleapis.com/css?family=Archivo+Black');
</style>
In style.css file
body{
font-family: 'Archivo Black', sans-serif;
}
Copy this code into the < head > of your HTML document:
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
In your CSS file, use the following rule to set the font-family:
// if you only want to change h1 fonts, use this selector
h1 {
font-family: 'Archivo Black', sans-serif;
}
For example:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<style>
// default font for everything in the body
body {
font-family: 'Playfair Display', serif;
}
// make all h1 Archivo
// note: if you want h2, h3 etc to be archivo as well you need to add the respective selector
body h1 {
font-family: 'Archivo Black', sans-serif;
}
</style>
</head>
<body>
<div>rest of your page...</div>
</body>
</html>
see more examples here
see here to find out more about css selectors

Font Family for email on Outlook Windows not applying

I know this has been asked everywhere online and I've exhausted most of the solutions I've come across. I am trying to set the font-family on all of the elements within the body of an email.
It works across everything fine (Outlook Mac, Gmail, Yahoo) using this CSS:
<style>
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
but not on Outlook Windows...
I tried to set the font-family inline on every single element in my email like the snippet below and it's still reverting to Times New Roman. Any advice on this would be much appreciated.
<h2><span style="font-family: arial, helvetica, sans-serif;">EMAIL HEADING TEXT GOES HERE</span></h2>
Many thanks.
Try this code, you need to wrap your style for MS Outlook. For more details click here
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
you have to wrap your style like this
<!--[if !mso]>
<style type=”text/css”>
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
as i remember outlook will fallback to time new roman if you use style