I am using the css text font "Century Gothic, Arial, Courier New, Sans-Serif" for my text on a webpage, however whenever I use the £ character, it does not show correctly on browsers (browsers test on are Firefox, Explorer, Chrome & Safari).
HMTL:
<span>£</span>
SPAN CSS:
font-family: Century Gothic, Arial, Courier New, Sans-Serif;
The above £ text shows as a question mark within a black diamond. Does anyone know why this is happening? Or do I just need to pick a different font family to display £ signs? All other text/characters on the page using the same font family show correctly
you have to use £ for the £ sign.
it will show correctly on all the browsers.
for eg.
CSS:
body { font-family:Century Gothic, Arial, Courier New, Sans-Serif;}
HTML:
<span>£</span>
Try adding metacharset to your <head>
<meta charset="utf-8">
Related
I was tasked with removing unnecessary tags from computer-generated HTML that had a lot of useless tags (I only wanted to keep color/strong/em information). I came along something similar to this HTML:
<b>
<span style="FONT: 20pt "Arial"">
<strong>bold</strong> not bold <b>bold</b> not bold
</span>
</b>
For me (on chrome & firefox), it shows the bold text as bold and the not bold text as not bold, and I am confused as to why this is. In particular, this makes my task more complicated: I thought I could just remove the tags that do not have color/strong/em info, so change it to something like this:
<b>
<strong>bold</strong> not bold <strong>bold</strong> not bold
</b>
But now, all is bold instead of what it used to be.
I tried to find out what I could put in the FONT style to reproduce this behaviour:
Replacing Arial with foo kept the behaviour:
<b>
<span style="FONT: 20pt foo">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- not bold is actually not bold! 20pt is applied -->
</span>
</b>
Switching the size and font changed the behaviour:
<b>
<span style="FONT: "Arial" 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold. 20pt is _not_ applied -->
</span>
</b>
Any of the two values on their own did nothing much:
<b>
<span style="FONT: "Arial"">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold -->
</span>
</b>
<b>
<span style="FONT: 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold -->
</span>
</b>
<b>
<span style="FONT: 20pt "Arial"">
<strong>bold</strong> not bold <b>bold</b> not bold
</span>
</b>
<div>Replacing `Arial` with `foo` kept the behaviour:</div>
<b>
<span style="FONT: 20pt foo">
<strong>bold</strong> not bold <b>bold</b> not bold
<!-- not bold is actually not bold! 20pt is applied -->
</span>
</b>
<div>Switching the size and font changed the behaviour:</div>
<b>
<span style="FONT: "Arial" 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold
<!-- everything is bold. 20pt is _not_ applied -->
</span>
</b>
<div>Any of the two values on their own did nothing much:</div>
<b>
<span style="FONT: "Arial"">
<strong>bold</strong> not bold <b>bold</b> not bold
<!-- everything is bold -->
</span>
</b>
<b>
<span style="FONT: 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold
<!-- everything is bold -->
</span>
</b>
Can anyone explain this behaviour, or at least tell me what styles I should look for that cancel outer styles?
I think I found the answer to my question, on the font css property documentation page. It states:
As with any shorthand property, any individual value that is not
specified is set to its corresponding initial value (possibly
overriding values previously set using non-shorthand properties).
Though not directly settable by font, the longhands font-size-adjust
and font-kerning are also reset to their initial values.
(My emphasis)
And a bit further down:
Initial value as each of the properties of the shorthand:
font-style: normal
font-variant: normal
font-weight: normal
font-stretch: normal
font-size: medium
line-height: normal
font-family: depends on user agent
So setting font: 20pt arial is equivalent to setting font-style: normal;font-variant: normal;font-weight: normal;font-stretch: normal;font-size: 20pt;line-height: normal;font-family: arial
In particular, the font-weight is reset from bold (or whatever it was) to normal.
So to solve my underlying question, I should look for font tags that do not specify the weight.
P.S. The reason that font: arial 20pt did not have this behaviour is because this is not an allowed value for font, so it is ignored:
If font is specified as a shorthand for several font-related properties, then:
it must include values for: <font-size> <font-family>
font-style, font-variant and font-weight must precede font-size
font-family must be the last value specified.
And in font: arial 20pt the font-family is not the last value specified.
Fonts depend on your actual browser and actual font. ref: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Fonts have a particular weight which corresponds to one of the numbers
in Common weight name mapping. However some fonts, called variable
fonts, can support a range of weights with a more or less fine
granularity, and this can give the designer a much closer degree of
control over the chosen weight.
WHICH of the copyrighted or not fonts do you have? Depends. Browser, computer, CSS etc. but we cannot tell here.
Always specify a fallback (sans-serif in this case) This can all get a bit "tricky".
Bottom line: put all this in CSS and use classes so you can actually control it best and less HTML overall when you decide to change things Like pt is not normally great for visual but is for printed but not used much in modern HTML as a size. Now if you decide to change the size you have a lot of places to change it but if in CSS only one.
Now for some examples: (not all inclusive of the topic by any means)
.container {
font-weight: normal;
margin: 1em;
}
.container .fonty {
font-size: 20pt;
font-family: Arial, Helvetica, Verdana, "Gill Sans", sans-serif;
}
.heavy-one {
font-weight: 600;
}
.heavy-two {
font-weight: 900;
}
<div class="container">
<span class="fonty">
<span class="heavy-one">bold</span> not bold <span class="heavy-two">bolder</span> not bold
</span>
</div>
<div class="container">
<span class="fonty heavy-container">
<span class="heavy-one">bold</span> not bold <span class="heavy-two">bolder</span> not bold
</span>
</div>
<p>One with style in tags: (don't do this)
<span>
<span style="font-weight: normal; font-size: 20pt; font-family: 'arial', 'Arial', sans-serif;">
<span style="font-weight: bold;">bold</span> not bold <span style="font-weight: bold;">bold</span> not bold</span>
</span>
</p>
<p>Second with style in tags: (don't do this, bolder not great IMHO as it is one step heavier)</p>
<span style="font-weight: normal; font-size: 20pt; font-family: 'arial', 'Arial', sans-serif;">
<span style="font-weight: bold;">bold</span> not bold <span style="font-weight: bolder;">bold</span> not bold</span>
<p>Third with style in tags and <strong>: (don't do this) This also shows multiple similar font families and the fallback to "sans-serif" you should always include</p>
<span style="font-weight: normal; font-size: 20pt; font-family: Arial, Helvetica, Verdana, sans-serif;"><strong>bold</strong> not bold <strong>bold</strong> not bold</span>
I am trying to us a custom font in my html-file. I have uploaded the font files to github and hosted a css file on github. I checked several times that the links work and that the font-files contain actual fonts. My problem is that the text in the HTML document is displayed in the standard font and not in the 'kievit' font. Can anyone spot my mistake?
Thank you!
The CSS code in kievit.css is:
#font-face {
font-family: 'kievit';
src: local('kievit'),url(https://cdn.rawgit.com/../Kievit-Medium.woff) format('woff');
src: local('kievit'), url(https://cdn.rawgit.com/../Kievit-Medium.eot);
}
#font-face {
font-family: 'kievit';
font-style: italic;
font-weight: bold;
src: local('kievit'), url(https://cdn.rawgit.com/../Kievit-BoldItalic.woff) format('woff');
src: local('kievit'), url(https://cdn.rawgit.com/../Kievit-BoldItalic.eot);
}
<html>
<head>
<link rel="stylesheet"
href="https://rawgit.com/../kievit.css" type="text/css">
</head>
<span style="font-family: 'kievit', sans-serif; font-size: 36px;"> Making the Web Beautiful</span>
<br> <br>
<span style="font-family: 'arial'; font-size: 36px;"> Making the Web Beautiful</span>
</html>
Edit: I changed the font-style to font-family as suggested, but it still does not work. I the first line is still rendered in arial instead of my custom font.
Try font-family: 'kievit' rather than font-style
I'd rather place a comment, however I don't have enough reputation to do so. At first sight your code looks ok, but there could be some other errors behind the screens (blocking network requests, wrong mime-type passing) So it would be easier to debug if you could provide us with a live example.
I'm building a email on html with the inline css. I need to build it with the google font Open Sans and using the light one with font-weight:300 for the text and the bold one with font-weight: 700 for titles.
I customed on googlefont website the url to have both particularities I needed like that :
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,700" rel="stylesheet">
The fact is that my email seems to apply by default the property 700 to all the page and can't find the 300 one if I put in my inline css the font-weight to 300.
However the 300 weight seems to be applied in a text, but I don't know why or understand the logic that could help me to apply a light weight whenever I want.
Does anyone know how if I can use Open Sans bold and light in the same page in a email html?
here is the codepen :
https://codepen.io/Katchou/pen/zzzLOy
You can use a different font-weight for the title and content
Refer the snippet
h3{
font-family:'Open-sans', sans-serif;
font-weight: 700;
}
p{
font-family:'Open-sans', sans-serif;
font-weight: 300;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<span>
<h3>Heading</h3>
<p>Content</p>
</span>
Or you can use
<span>
<h3 style="font-family:'Open-sans', sans-serif;font-weight:700">Heading</h3>
<p style="font-family:'Open-sans', sans-serif;font-weight:300">Content</p>
</span>
How's this? I can refine my answer if you add more information to the question.
EDIT:
You added a CodePen.
I got your title to show as Open Sans Light.
Check it out!
https://codepen.io/rickydam/pen/QggBja
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
#font-face {
font-family: 'Open Sans Light';
src:url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
</style>
<span>
<font face="Open Sans">
Hello world
</font>
<br>
<font face="Open Sans Light">
Hello world
</font>
<br>
<font face="Open Sans" style="font-weight:700">
Hello world
</font>
</span>
Trying to add a color and Font family within a H1 tag together using style still it not works.Color property does not have any effect on my current line
<h1 align="center" style=" font-family:Arial, Helvetica, sans-serif"color:#0000FF">The Island Resort and Spa
<br>Welcome to Holiday Speciala</h1>
Why Text is not colored?
Because you separate between css properties using " and it is wrong the style attribute written as follow style="" and inside the double quotes you should write you css properties and separate between them using ; like this
style=" font-family:Arial, Helvetica, sans-serif; color:#0000FF"
Got a little typo there..
<h1 align="center" style=" font-family:Arial, Helvetica, sans-serif; color:#0000FF">The Island Resort and Spa
<br>Welcome to Holiday Speciala</h1>
I have edited this awesome template to be used for an email marketing campaign. It looks fresh and clean, and seems to be able to serve us well. In Gmail it looks good, it has slight oddities that I cant fix because I think it deals with how gmail reads the code. But its super usable.
But if someone uses outlook to read our email, the message is all messed up. the bullet points are all messed up and not formatted. Here is some code:
<td align="center" valign="middle" bgcolor="#68696a">
<ul align="left">
<li align= "left" style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#ffffff; font-size:15px"><strong>Exterior Photos</strong></li>
<li align= "left" style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#ffffff; font-size:15px"><strong>360 Video</strong></li>
<li align= "left" style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#ffffff; font-size:15px"><strong>Social Media </strong></li>
<li align= "left" style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#ffffff; font-size:15px"><strong>Fast Results</strong></li>
<br>
<br>
</ul><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#ffffff; font-size:16px"><strong>Find Out More!</strong></font>
</tr>
<tr>
Are there any tips when working with outlook?
THe bullet point looks like this in outlook
-blah
-blah
-blah
-bah
google looks like:
> -blah
> -blah
> -blah
> -blah
The fact is that Outlook uses Word for rendering HTML markup of messages. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following articles in MSDN:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)