Ok, so I have html code like the following:
<div class="aClass">Thing One/Thing Two/Thing Three</div>
and the "/" displays correctly on IE and FireFox, but for Chrome and Edge it doesn't. There is no specific CSS styling applied to the class or any explicit font-family. The image displayed is:
Also, specifc codes such as / don't fix the problem
EDIT: I forgot to mention that I'm using bootstrap... Don't know if that has any impact or not.
well if i'm understanding the same what you meant by the question then i've just tested it on mentioned browsers and it works perfectly fine. i don't see any problem. or if you can elaborate your question with the help of screenshots, it might help us to answer you properly..
following snippet might prove helpful.
div.withCss{
font-family: arial;
font-size: 20px;
}
<html>
<head>
</head>
<body>
<div class="aClass">Thing One / Thing Two / Thing Three</div>
<div class="para"><p>Thing One / Thing Two / Thing Three</p></div>
<div class="withCss"> Thing One / Thing Two / Thing Three </div>
</body>
</html>
I found the issue. The site that I'm working with, they have an extra css file that contains the font info.
#font-face {
font-family: 'Campton Bold';
src: url('../fonts/campton/Campton-BoldDEMO.otf');
}
#font-face {
font-family: 'Campton Light';
src: url('../fonts/campton/Campton-LightDEMO.otf');
}
html {
font-family: 'Open Sans', sans-serif;
}
body {
font-size: 16px;
}
h2, h3, h4, h5, h6, .bold-text {
font-family: "Campton Bold", sans-serif;
}
h1, .light-text {
font-family: "Campton Light";
}
header p {
font-size: 18px;
}
The "Campton" variations are what's causing the problem. I just have to change those and it's fixed.
Related
I am trying to add Ubuntu font to my website, I'd like to have it universal on the site so everything is in that font but I started by just adding it to my h1 tag to see if it works, but it doesn't work. I have uploaded the font to my server.
This is my css so far:
#font-face {
font-family: 'Ubuntu';
src: url('ubuntu/Ubuntu-R.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Ubuntu', sans-serif;
font-weight : normal;
margin-top: 10px;
letter-spacing: -1px;
}
h1 {
font-family: 'Ubuntu', sans-serif;
color: #000;
margin-bottom : 0.2em;
font-size : 3em; /* 96 / 16 */
line-height : 1.4;
}
I'm probably being really stupid, as usual. I've looked at other examples but can't really see what I am doing wrong.
The problem can be solved in 2 ways.
You can either add the google font cdn to the head tag of your website if already hosted or if you have active internet access, so you don't need to worry adding it locally in your folder.
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
Like so
Or probably your file path location is wrong
if your fonts are packed the root directory, you can easily call it like
src: url('Ubuntu-R.ttf') format('truetype');
But if it is in a folder (e.g ubuntu)
it can be src: url('ubuntu/Ubuntu-R.ttf') format('truetype');
But if in a very long path.. try doing something like this
src: url(../ubuntu/Ubuntu-R.ttf);
Then calling the font-family attribute, call just "one" name, if it is locally in a folder. like so
#font-face {
font-family: Ubuntu;
src: url(ubuntu/Ubuntu-R.ttf);
}
.myclass{
font-family:Ubuntu; // The exact name for the #font-face
}
Hope it helps
It is as simple as adding this line as the first line of your style.css or whatever you call it:
#import url(http://fonts.googleapis.com/css?family=Ubuntu);
It takes care of everything, and then you can just start using it in your css:
.ubuntu-font {
font-family: "Ubuntu";
}
If you'd like bold and italic or some other things as well, you can just go here, pick those that you want, and copy the #import from section 3 in that page.
Also, with this you do not need to upload the font to your server, I don't see why everyone should upload all fonts to their server when there are several fast CDNs that already have everything there.
I have no problem displaying html pages on IE and Chrome using Open Sans Light, however when using Firefox, it does not understand this type of fonts.
This is a .css sections defining my fonts:
.txtName
{
margin-left: 18px;
font-size: 20px;
color: #0140be;
font-family: 'Open Sans Light' !important;
font-weight:normal;
line-height: 1.4em;
}
This is the part of html file that need to be displayed the same on IE, Chrome and FF:
<div class="txtName-Main">
<h1 class="txtName">Your pathway to success starts here</h1>
</div>
What can be the problem?
Thx
'Open Sans Light' is not a valid representation of the font-family. The 'Light' (300 weight) version of 'Open Sans' is:
In the head of your document:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
In your CSS:
font-family: 'Open Sans', sans-serif;
font-weight: 300;
I see a few suggestions, But what worked for me is loading my fonts with:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
and in .css I had to use the following definition:
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
So, instead of having:
font-family: 'Open Sans Light'
I used
font-family: 'Open Sans';
font-style: Light;
and it worked
it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:
font-family: open sans condensed light, open sans condensed;
i used it for assigning fonts to different divs. cheers, hope this helps.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
Goes in the <head> element and downloads light and regular fonts
In css style:
ul, p, h1, h2, h3, h4, h5, li, dd, dt, a{
font-family:'Open Sans', sans-serif;
font-weight: 300;
font-style: normal;
sets up (most) elements for web-based font and a (local) fall back font. font-style: normal is default, so it is not required. (Font-style:Light is not valid property.)
I'm trying to import google fonts, the thing is i follow the steps and actuallyit works if a use
<h3 style="color:white ; font-family:signika; padding:2%"> Whatever </h3>
but what i want to do it's set the Signika font as the default one, so i do
html {
font-family: 'Signika', 'Signika:700' , sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
but it does not wor,i still have to set it in every html tag, i even tried to put it specificly like
h1 {
margin: .67em 0;
font-size: 2em;
font-family:'Signika';
}
but still, not working!
Add this line to your index.html file in the <header>
<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
If font-family: signika works inline use that in the css file too.
html {
font-family: signika, sans-serif;
}
The rule 'Signika:700' would not do anything, what I think you're trying to do should be written as:
font-family: signika;
font-weight: 700;
I figured out i was putting the rule font-family in h1 but that was not the only instance of h1, therefor i had to look further and i found the respective h1 sentence to use the font-family, so it was missplaced after all, thank you for you help, was very useful!
I'm making a new site and webfonts aren't working at all. I stole the chunk of code as well as the same exact font files from a previous website I made, yet they don't work on this new site. I'm working from a responsive framework so I have a feeling something is taking priority over the code I've written to use webfonts.
The URL is http://willryan.us/responsive and the chunk I'm (currently) trying to make a webfont is the big "Will Ryan" at the top.
loading font
#font-face {
font-family: 'MuseoSlab700';
src: url('assets/webfonts/museo_slab_700-webfont.eot') format('eot'),
url('assets/webfonts/museo_slab_700-webfont.woff') format('woff'),
url('assets/webfonts/museo_slab_700-webfont.ttf') format('truetype');
/* font-weight:200; /* fixes bold bug in Firefox */
/*-webkit-font-smoothing: antialiased; /* Fixes viewing in Safari. Maybe unnecessary */
}
header code
h1, h2, h3, h4, h5, h6 {
font-family: 'MuseoSlab700', Helvetica, sans-serif;
font-weight : normal;
margin-top: 10px;
letter-spacing: 0;
}
specific header code
h2 {
font-family: 'MuseoSlab700';
color: #222;
margin-bottom : .5em;
margin-top : .5em;
font-size : 2.75em; /* 40 / 16 */
line-height : 1.2;
text-align: center;
}
html
<div class="section group">
<div class="col span_3_of_3">
<h2>WILL RYAN</h2>
</div>
</div>
Your CSS is in here: http://willryan.us/responsive/css/ , more exactly
styles.css
From there, you're trying to load assets/webfonts/aCertainWebFont.woff
So the WOFF file should be in the directory /responsive/css/assets/webfonts/
(on the FTP/SSH side, something like /var/site102/www/responsive/css/assets/webfonts/ but I digress)
You can check in Firebug or Inspector or any Devtools (F12) in the Network tab: red color and 404 status is bad, properly loading is better :)
So I've never seen this ever before and it has me stumped.
In chrome, my web fonts (served both from google and typekit) are not loading properly and when I look in my inspector at the CSS declarations for the fonts, it appears that there are random backslahes appearing in the actual font declaration that are essentially making them moot. I can't seem to reproduce the error in firefox or safari. Mostly wondering if anyone has ever seen this before/how did you deal with it?
Screenshot of the inspector is: https://www.dropbox.com/s/yafmnpzb5ve4mf9/Screenshot%202014-02-24%2016.02.12.png
And the site itself is bang-stage.dresgar.com
Any input would be great!!
The font declarations have the /s in the code.
I'm assuming this gargantuan css file is a compiled css file. The file that has the declarations in it (according to the code) is at:
/uploads/ultimatum/template_custom_2.css
the lines to fix look like:
h2, h3, h4, h5, h6, h2 a, h3 a, h4 a, h5 a, h6 a {
text-transform: uppercase;
font-family: \"alternate-gothic-no-1-d\", \"Francois One\", Verdana, Arial, sans-serif;
and
#menu-main-menu .sub-container .sub-menu .menu-item > a {
font-family: \"alternate-gothic-no-1-d\", \"Francois One\", Verdana, Arial, sans-serif;
I'm guessing that removing those slashes from the source should fix your problem.