Changing appearance of text using CSS - html

I am trying to figure out how the Google search box adjusts the Arial font to look the way it does. What I mean by that is, when I try to use Arial on my site at the same font size it seems much thicker then in Google's search box. As far as I can tell there is no way to adjust the font-weight of Arial on Windows. So I was wondering how they get arial to display so thin.
I would like to do this via CSS if possible but other means are ok as well.

Is this what you are looking for?
.google-searchbox-arial{
font-family: arial, sans-serif;
font-kerning: auto;
font-size: 17px;
font-style: normal;
font-variant: normal;
font-weight: normal;
color: #222;
}

Related

Does someone know why font-weight: bold; wont work on mobile device?

Im trying to get bold text to work on the mobile device, its all fine on the pc but it dosent show on mobile device. I have embedded code from google fonts.
.phone p {
font-family:'Roboto', sans-serif;
font-size: 16px;
font-weight: bold;
color: white;
line-height: 1.0;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
4 things.
You only choose the normal font-weight on fonts.google.com - use the link Eder Gomez provided.
Make a fallback like this font-family: 'Roboto', Arial, sans-serif;
Instead of saying color:white, do a hex color instead like color:#fff;
Instead of saying font-weight:bold, use the numbers for a more correct bold.
Roboto: font-weight:
400; = Regular
700; = Bold
Only the regular weight is loaded by default. To load regular and bold you would specify the weights in the URL: https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap or https://fonts.googleapis.com/css?family=Roboto:regular,bold&display=swap. Your desktop browser is probably faking the bold effect since there is no bold version available. – Turnip Apr 22 '20 at 10:12

Display fonts in different browsers

There is a design drawn in Zepplin. There is a font
font-family: HelveticaNeue;
font-size: 16px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #888888;
But for some reason in the browser it is displayed much thinner than in design. What could be the problem?
In the picture the design below the browser at the top:
here you hape put the font-weight property just put the value to 600 like below
font-weight: 600;
the reason behind that is when we put font-weight below 600 it shows the text normal, while if we put the font-weight between 600-900 it shows the weighted text
you can use font-weight: bold :- if you need text be look like bold or else you can give some value 500-900 to match the design in the zeplin.
hope it will work fine in all the browsers if give value as "bold".
#Alexandr Kizilow some fonts varies browser to browser. Use below:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
if not then make font-weight:500 (font-weight also varies from font to font)according to font you are using, it will make font bold.

CSS Font styles not working

I've been trying to add a css font style like the one on the landing page of http://www.lecrae.com. The text that says "LECRAE", I'm trying to use the same css style, but it doesn't seem to be working for me, only "W" in the word "Welcome" shows, and it doesn't look like the font too. Here's my code below:
CSS
.header { font-family: Futura, "Trebuchet MS", Arial,sans-serif;
font-weight:700;
letter-spacing:14em;
line-height:1em;
color:#333;
font-style:normal;
font-size:120px;
}
HTML
<h1 class="header">Welcome</h1>
There are three issues here:
Only the first letter "W", of your heading "Welcome" is showing.
The font(s) you specified are not showing.
You want to use Futura, but it isn't available for free.
The first issue is solved easily. You are using a huge letter-spacing of 14em, I assume you made a typo when copying the given source and it was supposed to be .14em. This explains why you can only see the first letter: all other letters are being pushed out of the screen.
The second issue is also solved easily. You are specifying fonts that might not be available on a users computer. For example, most Linux distributions do not ship with any of the fonts you specified and would hence fall back to sans-serif. If you really want to use a specific font, #import that font from a source like Google Fonts. This way, the font will be downloaded by the user's browser.
The third issue is easy as well: you either pay for the font or you need to use a different, freely available font instead.
Putting that together:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
.header {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: .14em;
line-height: 1em;
color: #333;
font-style: normal;
font-size: 120px;
text-transform: uppercase;
}
<h1 class="header">Welcome</h1>
Also note that you did not copy the text-transform: uppercase rule, which I added here.

How to specify a web safe user default font if google font is not available

For the sake of design I like to use very large fonts in headings (around 70 - 85 px) To prevent that from overwhelming the page I need a really thin font. I found Poiret One on google fonts and it is categorized as a cursive family. It is a very thin, very elegant font but the default in the cursive family seems to be comic sans which is just the opposite -- very clunky, bold, and unattractive in large headings. In my css file I have:
h1 {
font-family: 'Poiret One', cursive;
font-weight: 100;
font-size: 85px;
color: #99ccff;
}
I would like to add courier new as a user default font as it is the thinnest of the web safe fonts and add the following attributes to make the character spacing similar to Poiret One so that I don't overflow my bootstrap columns:
font-family: "Courier New";
font-style: normal;
font-size: 4.8em;
font-weight: 400;
letter-spacing: -0.125em;
line-height: 1.5em;
What is the css I can use to tell the browser if Poiret One cannot be viewed by the user, please use courier new with the font modifications as given above?
Looking forward to a solution. Thanks!
Use font-family like this:
font-family: 'Poiret One', cursive, 'Courier New';
When browser doesn't find Poiret One or a cursive font, then it will use Courier New font.

CSS Font Rendering Issue

I am developing a website. I'm using a google font to style my page. But it's not displaying correctly. I've read up a bit on faux fonts, but I believe that only applies when the font that is needed is not supplied. I've imported my google font, code is
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;
src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wprx7IBmrqA5IG9z8WNe77b9o.woff) format('woff');
}
My CSS for the font is
font-size:30px;
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;
But I believe it's displaying a faux font. Here's the difference between an image of what it should look like on the left, and what it's displaying on the right.
My problem http://resource.theboulderdesign.com/400/homebox/gettingcompare.png
I hope someone can solve my problem.
Morgan Kenyon
It's a Chrome/Windows problem. It'll affect the font thickness and letter spacing, but you can add a white text-stroke to smooth it out:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
-webkit-text-fill-color: white;
Demo: http://jsfiddle.net/zzmbu/
Here's a screenshot of it:
I've also found that if you add
text-shadow:0px 0px #FF0000;
property to my CSS, it renders correctly. I don't know why though.