I've used a CSS from Goolge and I'm getting puzzling result. Below are two screenshots. The one from Firefox shows the correct (or, at least, the expected rendering), the one from Chrome shows some random font...
Firefox
Chrome
This is how I load it:
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700italic'
rel='stylesheet' type='text/css'/>
The relevant CSS rule:
.digit {
font-family: 'Lobster Two', cursive;
font-size: 24pt;
background-color: #d1d2d4;
color: #ebebec;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px;
cursor: pointer;
display: block;
float: left
}
I'm at a loss...
Following, somewhat, Fluidbyte's advice I decided to use the font file I have, rather than the one from Google's CDN and it worked. I'd still be interested to know why wouldn't it work the first time I tried, but as the practical solution (possibly only relevant to this particular font) this should help you, if you are facing the same problem.
Related
I have a problem, the following text works when I created it in my windows computer, but when we test run it the text stays the same in windows computer, but when the website opens in safari the text is cut of how do I fix this?
The mobile works fine, it's just the desktop.
Here is the CSS Code for the text:
.header{
text-align: left;
font-size: 55px;
font-weight: bold;
font-style: italic;
height: 100%;
width: 80%;
color: #006400;
border-radius: 5px;
margin-left: auto;
margin-right: 75%;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif,cursive;
}
Tried checking the CSS but not sure what the problem is.
I see you're missing line-height in that CSS block, try defining that first.
If that doesn't work, I recommend looking at this thread, there are a bunch of different solutions here. Font Rendering / Line-Height Issue on Mac/PC (outside of element)
I was making a website and after doing some coding with css, I pushed the data to my hosting. But, the website css wasn't showing up what is was supposed to be! I got a lot of support here, discord, and namecheap (my hosting). And they all said it has to do with browser caching.
After doing some experiments I concluded that it changes with wifi connection. I went to my school wifi and the css looked normal, but back home it didn't look what it was supposed to.
I isolated the error and found it had to do with 1 css file. But after taking the identical code to a different file it worked fine. Granted, the code did change while I was putting it into a different file since there was css there before.
Here is the code that seemed to cause it:
h1 {
font-family: "JetBrains Mono ExtraBold", monospace;
color: #2474ff;
text-align: left;
float: left;
margin: 5px 30px;
font-size: xxx-large;
box-shadow: 0 0 25px 5px #0ff;
border: solid dodgerblue 4px;
border-radius: 15px;
animation: crazy 3s infinite;
}
#keyframes crazy {
50% {box-shadow: 1px 2px 3px blue}
}
.content {
font-family: "JetBrains Mono", monospace;
font-size: 14px;
border: 4px solid dodgerblue;
box-sizing: border-box;
width: 300px;
height: 500px;
padding: 5px;
display: block;
border-radius: 10px;
}
.content h3{
font-size: 30px;
font-weight: bold;
text-align: center;
}
button {
font-family: "JetBrains Mono ExtraBold", monospace;
}
a {
float: left;
margin-left: 15px;
The problem is fixed now, but I wanna know why this was happening.
This is the intended behavior of browser caching; it's not an error. Your browser "remembers" a file it's already downloaded, and saves that data locally for a period of time instead of re-loading and re-reading it again, so that sites load more efficiently.
Since, while you're developing and frequently changing a file, you don't want this behavior, there are a many things you can do. These are just a few:
• Developer tools built into web browsers, like Chrome Inspector (which will benefit your development in many other ways as well) will have a setting to disable browser cache when it's active, so every time you refresh a page, it will automatically download the freshest files
• You can manually clear the cache on your browser. Most browsers have shortcuts for this (for example, holding down shift while pressing the reload button)
• A simple way to make sure everyone else's browsers downloads the most recent version of your css file, too, is to add a querystring to the end of your css link, and change it every time you make an update. e.g.:
<link rel="stylesheet" type="text/css" href="styles.css?v=1">
(next time you update the file and want to make sure everyone sees those changes, change v=1 to v=2)
This is a browser feature. One of the simplest ways to get around the issue is to "hard refresh" the page.
On Windows it's ctrl + F5
On Mac it's cmd + shift + r
I recently came along a font(-file) that seems to get positioned vastly different inside a span on different operating systems. If someone knowledgeable with fonts knows what exactly is going wrong here and if there is a fix or a workaround for something like this, I'd greatly appreciate it.
I've made a pen here: https://codepen.io/jls_chris/pen/rQmpEE
which should show you the basic setup of the element:
<div class="box">
<div class="wrapper">
<span class="value">24%</span>
</div>
</div>
#font-face {
font-family: 'Impact LT Std';
src: url('https://sorry.font.is.licensed/ImpactLTStd.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
.box {
height: 163px;
width: 259px;
position: relative;
z-index: 10;
// Set by gsap
opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0);
// For debugging
background-color: lightblue;
.wrapper {
height: calc(163px - 33px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// For debugging
background-color: lightgreen;
.value {
font-family: 'Impact LT Std', Sans-Serif;
font-size: 95px;
-webkit-font-smoothing: subpixel-antialiased;
// For debugging
text-decoration: underline;
outline: 1px solid red;
}
}
}
As the font license doesn't allow me to share it, here a couple of images:
On Windows (any browser):
On Mac (any browser):
On Windows everything looks correct but on Mac the text is clearly not centered as I would expect it to be.
The span is correctly positioned on both and has the correct dimensions but the it seems like the baseline is positioned completely differently on the two OSes. I tested a couple of other fonts but could not reproduce it.
Does someone know what could be wrong/broken in this font and if there might be a fix?
elveti linked the following post (in a comment, I would accept that comment as the solution if possible): Font Rendering / Line-Height Issue on Mac/PC (outside of element) which outlines the same issue and contained the solution.
Sadly FontSquirrel was not an option as it blocks Adobe fonts. But I edited the font using FontForge as mentioned in the post by Luke: https://stackoverflow.com/a/38508202/1084239
For me none of the checkboxes were checked but the "Win ..." metrics were different than the other metrics. I copied the "Win Ascent" and "Win Descent" values into the corresponding "Typo" and "HHead" fields as my issue was that mac displayed the font incorrectly (and left all the checkboxes unchecked). After exporting the font as ttf using the default settings and ignoring any warnings, it generated a font that finally worked correctly on both mac and windows.
My website is http://proustscookies.blogspot.com/. I'm working on styling the buttons attached to the Search form using CSS.
Here is the CSS:
input.gsc-search-button {
margin-left: 10px;
height: 24px;
width: 60px;
border-style: none;
background-color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
The margin-left command is working great in Firefox and Chrome, but not at all in Safari.
All other CSS rules (above and throughout the site, data not shown) are working in all three browsers (and last time I checked also in IE).
I found the object name (input.gsc-search-button) using the Chrome Extension Stylebot. Unfortunately I can't find the underlying html anywhere (This is a blogger-sponsered widget. Could Google be hiding the code somewhere? I don't know.)
If anybody could help me figure out why the margin isn't showing in Safari, or how to find the html for the Search box, I would appreciate it very much.
It's overridden by google.
If you do:
margin-left: 10px!important;
You can override that.
Or you could make your selector more specific (and hence give it precedence) by doing something like
td.gsc-search-button input.gsc-search-button {
margin-left: 10px;
}
Hint: you can right click on an element (in firefox or chrome) and click "inspect element" to see the css associated with that element.
I had a similar issue where all styles were applied correctly except on mobile safari, very strange. It even worked on desktop safari!
In the end, I fixed it with more exact targeting. I had this before:
.phone{
background-color:gray;
}
This change fixed it.
div.phone {
background-color:gray;
}
By the way, I figured it out with using inspector on mobile safari. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
Here is a link to the page that is giving me trouble:
http://youtube.thegoblin.net/layoutfix/
If you view the website in firefox and chrome you can see that the spacing is different. The way it looks in chrome is the way I meant it to look.
I have tried linking in the YUI 2: Reset CSS as it as suggested in another question, but I cannot seem to get it to work.
Here's the stylesheet link: http://youtube.thegoblin.net/layoutfix/styles/style.css
You should change line-height on some elements that contains text. These are line-heights for some (maybe all) elements you need to change:
#title: 56px
.yoText: 46px
#buttonTitle: 68px
#buttonText: 34px
Looks like browsers count differently line height for font you choose, so defiantly line-height could make it better.
Just short example, not full fix:
#dl-button #buttonTitle {
color: #37590B;
float: right;
font-family: "TallDark";
font-size: 600%;
line-height: 0.7;
margin-right: 60px;
margin-top: 20px;
text-shadow: 1px 1px #BDF277;
}
makes green button much better, so you may play around with others the same way.