Solved

Css hacks Firefox, Opera, IE5Mac

Posted on 2004-09-05
30
2,389 Views
Last Modified: 2013-11-19
Hi I'm looking for a css hack that will adjust opera 7 and not make any changes to firefox.  I have at the moment:-

#pgStudent
{
      position: absolute;
      width: 170px;
      height: 226px;
      margin-top: 100px;
      margin-left: 300px;
      background-image: url("image/pgStudent.gif");
      background-repeat: no-repeat;
}

html>body #pgStudent
{
      margin-top: 83px;
}

The above adjust the margin-top to 83px for opera, but it also changes firefox which does not need to be changed, so i need a hack which will only effect opera?

I'm also trying to adjust for IE5Mac:-

#vNav
{
      position: absolute;
      float: right;
      width: 253px;
      top: 40px;
      right: 365px;
      border: 1px solid #ccc;
      font-family: 'Verdana', 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
      font-size: 12px;
      background-color: #EDF1F9;
      color: #333;
}

/* hide from IE Mac \*/
#vNav
{
      position: absolute;
      width: 253px;
      margin: 2px 0 0 -12px;
      padding: 0;
      border: 1px solid #ccc;
      font-family: 'Verdana', 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
      font-size: 12px;
      background-color: #7EA7D8;
      color: #333;}

html>body #vNav
{
      width: 253px;
      top: 29px;
      right: 520px;
}

html>body #vNav li a
{
      width: 253px;
      padding-right: -50px;
}

/* end hiding */

This works well but my vNav which is a box of links start to float round the screen when the window is resized.  Without this it stays in place IEx, firefox, opera, but when i add the hack for IE5Mac inserting top and right elements instead of margin-top the box starts to float around the screen.  Any help woul be appreciated.

Thanks

Ross
0
Comment
Question by:rossh1977
  • 13
  • 11
  • 4
  • +1
30 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11984351
WHY?

What is the point of finding hacks to do minute adjustments for specific browsers, when tomorrow a ne release of one of them will render the hac worthless.  I think it is rare for users to use more thatn one browser at the same time, so it is not likely the difference in rendering has any significance to anyone but you.  

If this is just some rigid control freak thing, then enjoy, you should enjoy may years of enjoyment trying to find a single perfect page layout where you can control every pixel unconditionally.

I recommend you look at the reason CSS was created.  It is about flexibility, fluidity, and accessibility; not rigid magazine pages.  I think you may be in the wrong century if you think you have to; or can exercise that kind of control of a browser where the ultimate final word on what presentation looks like is in the hands of the user.

Cd&
0
 
LVL 18

Expert Comment

by:arantius
ID: 11984519
I concur.  A well designed layout will work in all browsers without hacks.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11985024
I'm afraid it gets worse...

I assume you're referring to this site from your previous question:
http://www.extendyourstyle.co.uk/fedsoc/v06/

I took a good look at your code, and you're missing the most important element - the very first line of your page,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

This is extremely important because it helps establish a common set of rules that all modern browsers can abide by. It is instrumental in maintaining a "relatively" common UI between browsers.

Unfortunately, you'll see what happens when you add it in. Most of the problems are simply case-sensitive issues that can be fixed easily enough - however, I think you are likely looking at a layout not so rigidly confined to an imaginary grid that only exists in your graphics application. Also, as noted in the other Q - all the absolute positioning and negative padding and margins is going to cause serious issues.  I can't possibly tell you how to layout the page in a few short lines, but, as mentioned above, flexibility is the key.

Just my 2 cents, FWIW...
Sean
0
 

Author Comment

by:rossh1977
ID: 11985061
For Sean:-

Thanks, yes i've added it in this afternoon.  I am actually just trying to do things a bit different and it's only the second site i've done in css.  Since added the doctype i have had to make minor adjustments but nothing major.  I know all the absolute positoning and negative margins etc., is nt idea, but i just wanted to try things out.  To be honest apart from IE5Mac their really isnt any problem.

This is for the other guys:-

Okay I think your over reacting a little but fair enough, would probably agree with everything your saying but I really don?t want to get into any geeky debate over the how?s and why?s of hacks.  My original question was not why should I use hacks, but if there is a hack for opera which does not effect firefox.  Mate I?ve got my own reasons and I, my colleagues and the people who view my work will be the judge as to whether the work I do is any good.  So is their anyone else that feels they can help, or is there in fact no point in paying for this service.

Basically if you don't try things out then you aint going to know if it worth while doing.  I believe everything you guys are saying but without giving it a go we'd be asking your guys opinions for the rest of our days and that weouldn't get us anywhere now would it.

Cheers

Ross
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 11985151
Before yo explore hacks, you might want to start with valid, code.  Trying running it through a validator.  It should be interesting to see what comes up for <p/> and <a/>.

As for "or is there in fact no point in paying for this service."

I couldn't care less what anyone pays or does not pay for on this site.  That is between you and site managment.  I am here on a voluntary basis and my objective is to increase and improve the database of solutions.  Yet another question on how to make a bad design work adds nothing to the value of the database, and is not only of no value to future users, but may even be a negative if it sends someone in the wrong direction.

As for the debate... I don't see one.  The experts who have posted all think you are going down a wrong road.

>>>Basically if you don't try things out then you aint going to know if it worth while doing.

If this is an academic exercise do what you will that is how new things are discovered.  If what you are doing is supposed to be for real world consumption; then you start with sound standards compliant design; and do carefully documented extensions; so the developer who comes behind you has some prayer of understanding how to maintain it.

Cd&
0
 

Author Comment

by:rossh1977
ID: 11985181
handbags at dawn eh!  Well thanks for your help!  COBOLdinosaur i'm awarding you 500 points because your such a clever person.

Thanks again

Ross
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11985256
Somehow the C does not surprise me.  Delete is correct, but apparently correct is not an approach that you care to explore in more that just web development.

No matter, it will end up deleted anyway.  As Page Editor I see no value in it.  

Sean,

You want to save me the trip to CS; or if you concur, I will just delete it myself.

Cd&
0
 

Author Comment

by:rossh1977
ID: 11985510
The reason i gave you an average is because you have an attitude problem which puts people who are seeking advise down.  I'm sorry but that's my opinion.  If i can't express it or give a grading which i see fit then i can't see the point.  I agree with your points but they way in which you conveyed them was average.  I have submitted my question again.  I hope that's okay as i do wish that someone else will pick it up.

Thanks

Ross
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11985662
Hmm... back in school are we?

I guess in your six months on the site you have not had time to read any of the site documentation.  So perhaps a link to grading guidelines:
http://www.experts-exchange.com/Web/Web_Languages/CSS/help.jsp#hi73

Had you read them you would have asked for a delte if you did not feel you got an answer instead of grading "attitude".  Most users prefer the blunt, no sugar-coating responses and have said so; but most users I work with on this site are professionals, not academic experimenters.

Cd&
0
 

Author Comment

by:rossh1977
ID: 11985763
I think your last comment just confirms my grading.  This is my last post on the matter.  Feel free to continue but i'll not be back.

Thanks

Ross
0
 

Author Comment

by:rossh1977
ID: 11985951
Sean i totally appreciate that, and i really do take on board what you guys are saying to me otherwise i wouldn't be here.  I've no problems in telling everyone i'm a newbie but i am passionate about what i do.  If you can help me great.  Sean the design that you looked at before and ignoring the content only focusing on the banner.  This is what i wanted to achieve layers overlapping, very little images and trying to do something with css that you can't do with tables.  I would really appreciate if you could glance over it.  The hacks i thought was part and parcel of css a common work around for browser, but my main aim was to take elements out of the constraints of tables, overlapping etc.  If you give me your two cents i'll certainly take it on board.

Thanks again

Ross
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11986028
I am more than happy to do that Ross, we all are - and we're all new at one thing or another so feel free to call me a newbie too.

Cd& and myself have just had more experience in some areas, as you no doubt have in others. One of the things I know that Cd& and I do have in common is our persistence (maybe somethimes too much so) on getting developers to realize that 90% of what gets generated is ... outdated.
The intent is good, but the delivery is fundamentally flawed.

Give me some time to look over what you're doing in detail, and I'll get back to you.
Sean

But first, I want to change Cd&'s grade to what it should be, if you're fine with that.
0
 

Author Comment

by:rossh1977
ID: 11986118
Thanks Sean no problem.  I'm just about to update my latest changes to http://extendyourstyle.co.uk/fedsoc/v06/ thanks very much for your time most appreciated.  I know you guys are trying to point me in the right direction so thanks and i've no problem over Cd&'s grade.

Cheers

Ross
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11986151
Grade changed to an A - which is good, because neither one of us could afford his time if he was charging by the hour. Well, I could afford it, but I'd rather spend the money on beer :-)
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:rossh1977
ID: 11986171
Fair comment, Cd& i'm sure you don't need it, but apologies!  :-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11986243
Ross,

You don't owe an apology.  We had a misunderstanding, and I was a major contributor to it.  I see the way I used the term "academic experimenters" comes across as belittling, and that is not what I was trying to communicate.  

Playing with thing and seeing what happens is how we all learn.  However, hacks are generally the last resort.  If I have a problem that can only be solved with a hack then; I solve the problem, that way; but not until I have run through every other possibility.

Maybe we take ourselves too seriously sometimes, but we are just trying to make a positive contribution.  So I appologize if I crossed the line between blunt and offensive.

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11986501
Cd& - while I'm looking at the site...
there's some old javascript from Dynamic Drive that Ross is using to write to another div onouseover


var content=new Array();

content[0]='<h1>continous professional development</h1>Lorem ipsum dolor sit amet....';
content[1]='<h1>continous professional development</h1>Lorem ipsum dolor sit amet....';
content[2]='<h1>continous professional development</h1>Lorem ipsum dolor sit amet....';

function changetext(whichcontent)
{
      if (document.all)
      descriptions.innerHTML=''+whichcontent+'';
}

function reset(){
      if (!scriptmenu.contains(event.toElement))
            descriptions.innerHTML=temphtml;
}


It uses a mouseover in the li tag:
<li><a href="#" title="text" onmouseover="changetext(content[1])">text</a></li>

which writes to this:

<div id="descriptions">
      <h1>welcome</h1>
      Text goes here
</div>

Pretty obvious with the document.all that this script was written last century. Can you suggest another that would be more standards compliant - and ideally one where we can remove those terrible inline onmouseovers from the html tags?

Ross - perhaps you could post a separate Q for this in the Javascript TA where Cd& can respond. It really does need to be fixed...

Thanks, I'll have some layout recommendations for you by the morning.
Sean
0
 

Author Comment

by:rossh1977
ID: 11987877
Hi guys,

Yeah i did notice the javascript from Dynamic Drive wasn't playing ball in certain broswers.  I'll post a question for it now.  

Thanks

Ross
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11990338
Well for that particular piece, I think it can be relatively simple with:

function changetext(whichcontent)
{
document.getElementById('descriptions').innerHTML='<font face="Verdana"><small>'+whichcontent+'<font></small>';
}
function reset(){
document.getElmentById('descriptions').innerHTML=temphtml;
}


A lot of the older DD stuff will not work with non-IE browsers, because some of it was written before support for the DOM methods and has never been updated.

Cd&
0
 

Author Comment

by:rossh1977
ID: 11990497
Hi, thanks for getting back to me. I've tried that out and it works fine in the browser versions i have.  Cheers.  I've been working on the banner design and came up with something which is still not perfect and i'm having a bit of bother in alternative browsers but it's using a lot less negative margins and absolute positioning.  It's far away  from being finished but if you could let me know if i'm on the right track.

<style type="text/css">


body
{
      margin: 0;
      padding: 0;
}

#container
{
      width: 750px;
      height: 135px;
      background-color: #759CC9;
      border-bottom: 5px solid #ccc;
}

#3colContainer
{
      margin: 0;
      padding: 0;
      background-color: #fff;
}

.content
{
      height: 200px;
      margin: 0;
      padding: 0;
      background-color: #ebebeb;
}

#left
{
      float: left;
      margin: 5px 0 0 2px;
      padding: 0;
      background-color: #fff;
}

.contentLeft
{
      width: 239px;
      height: 100px;
      margin: 0;
      padding: 0;
      background-image: url("image/fedsocLogo.gif");
      background-repeat: no-repeat;
      border: 1px solid #ccc;
}

#right
{
      float: right;
      margin: 15px 20px 0 0;
      padding: 0;
      background-color: #fff;
      border: 1px solid #ccc;
}

.contentRight
{
      width: 250px;
      height: 100px;
      background-color: #7EA7D8
}

#middle
{
      position: absolute;
      width: 253px;
      margin: 20px 0 0 -10px;
      padding:  0;
      background-color: #fff;
      background-color: #7EA7D8;
}

.contentMiddle
{
      width: 253px;
      margin: 0;
      padding: 0;
      background-color: 7EA7D8;
      border: 1px solid #ccc;
}

#top
{
      width: 700px;
      height: 14px;
      background-color: #7EA7D8;
      border: 1px solid #ccc;
}

</style>

</head>

<body>

<div id="container">

      <div id="3colContainer">
            <div id="top"></div>
            <div id="left">
                  <div class="contentLeft">
                  </div><!---end id: content-->
            </div><!---end id: left-->

            <div id="right">
                  <div class="contentRight">
                  </div><!---end id: content-->
            </div><!---end id: right-->

            <div id="middle">
                  <div class="contentMiddle">
                  </div><!---end id: content-->
            </div><!---end id: middle-->

      </div><!--end id: 3colContainer-->

</div><!---end id: container-->

Thanks

Ross

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11991015
Okay, you've loosened it up some, but you are trying to create a grid like a table.  Its a flat two-dimensional presentation, like a printed page.

It can be very difficult to force yourself to think outside of the two-dimensional constraint; because we are used to looking at two-dimensional presentations.  

In the real world we see and feel things in three dimensions. That means the do not always appear to fit togethr correctly, but that is becouse of perpesctive.  We make them look correct to our brain by changing the perspective to bring thing into or out of alignment.  As we change the perspective, we add a 4th dimension a we use time for a transition.

Now try and think about a web page the same.  Instead of rigidly joined elements, a series of independent elements help together very loosely and allowed to find their own place; like a flock of geese getting into the V formation.  We are not limited to just the x and y co-ordinates.  Everything does not have to be on the same plane.  The z-index allows us to control stacking ordermaking it possible to predict how the browser will render unvarious conditions.  

The fourth dimension is there as well.  The user by their actions can change perspective with resizing, resolution changes, font-size changes, clicking on elements within the page, or changing browsers.  We should not see that as a problem (as we do when we try to use a rigid grid); that is an opportunity to show a different side or alternate presentation.  

Browsers are one of the sweetest gifts ever bestowed on developers; they will always try to give optimum presentation of the code; if we let them.  When does the page look right? The answer has nothing to do with techincal presentation.  The page look right when the presentation in front of the user is what they want and need at that single moment in time.

Right now as you view this web page, how much of the page are you looking at?  Just a tiny percentage with this comment in it?  Does it matter what the rest of the page looks like or what  it is doing?  if you could click on a comment and fill the screen with nothing but the comment you want to read, and a button to go back would it matter to you what your actions did to the rendering of the rest of the page.

I guess that was a long way of saying  when you are developing the page don't think about how it looks to you and what you want to control.  Think about what perpective the user wants. You'll start seeing the content and how to make it prominent, and the eye candy just becomes a little chrome to make it pretty; which is the way it should be.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11991063
Just so I don't end up throwing a total abstraction at you.  Let deal with a specific event.

You want have a menu here on mouseover or click events take place at the users request.  The user has said.  I want the perspective changed to something different, and your page responds.  How well does is respond?  They have given a clear indication of what is important to them on the page at a given moment. Does the rendering of anything else on the page matter? Should what they consider to be important at this moment not become the dominant element on the page? Is there any value in taking CPU cycles away from responding to the user to do housekeeping to keep other parts of the page pretty?  

Finally is a user more likely to complain because the menu does not work as well as they would like, or because the rest of the page didn't look right when they dropped down the menu?

Cd&
0
 

Author Comment

by:rossh1977
ID: 11991651
Right I?m in to this, kinda feeling like this is the path to web designer enlightenment, which is where I want to be.  

This website is for a faculty of education within the university.  With new legislation out next year (UK) disability access is a key issue, which must be addressed.  Css is surely the right path to go down as regards to html documents which can be designed without restricting the user whether disabled or not.  So that my main concern for this design.  Creating a site, which can be easily accessible.

Wanting to impress, you maybe don't think I got away with it, but with the banner of the site I am actually wanting to break away from the constraints of tables, hence the -margins and absolute positioning.  How does this concern the user?  Not much, but I?ve got half a dozen manager that drool over a pretty picture, an animated gif or a search engine for a massive 8 page site.  and care nothing for disability access issues or whether or not they actually have any decent content for the site.

So I am restricted as to what I can do.  If I can get the structure right, banner, navigation, disability access I?ll be happy and I?ll feel I?ve got something out of this.

I know I?ve been pestering you guys for what seems like forever, but do you think you could help me with the middle id in the above code.  I want it to overlap the left and right columns expand pass the bottom border.  I have done this but I am coming stuck with the likes of firefox and opera.

Thanks

Ross
0
 

Author Comment

by:rossh1977
ID: 11991722
Right getting their!

I think two absolute positioning and 2 -margins.  I know i'm still in the boxy thing but you've got me on the right track i can totally see the benifits of going over the css:-

<style type="text/css">


body
{
      margin: 0;
      padding: 0;
}

#container
{
      width: 750px;
      height: 135px;
      background-color: #759CC9;
      border-bottom: 5px solid #ccc;
}

#3colContainer
{
      margin: 0;
      padding: 0;
      background-color: #fff;
}

.content
{
      height: 200px;
      margin: 0;
      padding: 0;
      background-color: #ebebeb;
}

#left
{
      position: absolute;
      margin: -5px 0 0 5px;
      padding: 0;
      background-color: #fff;
}

.contentLeft
{
      width: 238px;
      height: 99px;
      margin: 0;
      padding: 0;
      background-image: url("image/fedsocLogo.gif");
      background-repeat: no-repeat;
      border: 1px solid #ccc;
}

#right
{
      float: right;
      margin: 15px 20px 0 0;
      padding: 0;
      background-color: #fff;
      border: 1px solid #ccc;
}

.contentRight
{
      width: 250px;
      height: 75px;
      background-color: #7EA7D8
}

#middle
{
      position: absolute;
      width: 253px;
      margin: 20px 0 0 233px;
      padding: 0;
      background-color: #7EA7D8;
}

.contentMiddle
{
      width: 253px;
      margin: 0;
      padding: 0;
      background-color: #7EA7D8;
      border: 1px solid #ccc;
}

#top
{
      
      width: 700px;
      height: 9px;
      background-color: #7EA7D8;
      border: 1px solid #ccc;
}

</style>

</head>

<body>

<div id="container">
<div id="top"></div>
      <div id="3colContainer">
            <div id="left">
                  <div class="contentLeft">
                  </div><!---end id: content-->
            </div><!---end id: left-->

            <div id="right">
                  <div class="contentRight">
                  </div><!---end id: content-->
            </div><!---end id: right-->

            <div id="middle">
                  <div class="contentMiddle">testing, testing
                  </div><!---end id: content-->
            </div><!---end id: middle-->
      </div><!--end id: 3colContainer-->

</div><!---end id: container-->

</body>

</html>

It aint going to be perfect but i feel i'm on the right track

Thanks

Ross
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11992108
For accessibilty one of the big things (and you are already doing it) is to leave the fonts alone.  The visually impaired must be able to set large font sizes.  

The problem is that if text is constrained in dimensioned containers, it creates problems trying to render it.  If you don't set heights the begins to solve the problem because the browser will do the sizing.  Instead of usng margins outside of the box, use padding inside the box to adjust the heights once you see how much help the browser needs to sise it the way you want it.

For widths you have two ways to work from to handle the changes in font size in re-sizing of the screen.

Use percentages for widths, or decide on one element for fix sizing and let the browser distribute the width on the rest.  Generally if you have an image you use that for the fixed width portion.

For a banner you are probably okay the way you are going but you need to let the width out to 100% below the banner so it can react to user requirements.  If you are going to have a nav bar under the banner, you do not want put it in the same container as the banner otherwise you will contrain it to the dimensions of  banner.

Is this helping, or am I just making things more difficult for you?

Cd&

0
 

Author Comment

by:rossh1977
ID: 11992607
Not at all, mot appreciated Cd&.  I was wondering about the fonts, i think i've seen people using pt measurements before, not quite sure if this is related.  I'm fine with everything i can see it in my head at least for the moment.  I feel i should be awarding you more points for this I realise your time is limited so i don't want to keep you, I can work on it and i'll let you know how i get on, but feel free if their is anything else you think i could do with.

Thanks again

Ross
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11992816
Points are for print.  They relate to the measurments for typesetting.  The only correct use for them on a web page is if you are doing a stylesheet for print output.  

Points are not a major thing for me.  I get motivated by three things.

Questions that are interesting.
Open minded Questioners.
and
Any chance to do long post about the benefits of modern approaches to development.

My main compensation this site is when people with a problem get a solution, becaue I was able to make a useful suggestion.

Cd&
0
 

Author Comment

by:rossh1977
ID: 11992841
Well your doing just that mate, i'm inspired. Getting more into css as i go along and loving it! I was wanting to ask would you use php to switch between or remove the style sheets for text only and do you validate pages through bobby.watchfire.com/

Thanks

Ross
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11998011
I don't do external validation for accessibility.  I develop intranet apps and we use user preferences stored in profiles to generate the styling.  We are able to give users with problems accessibility enhancements based on their profile, and we have development standards that require pages the are user controllable.

I don't use PHP.  I think we have it available on a couple of the PC based servers but our primary backends are mainframes where JSP, XSL and custom servers handle the page generation; but in general, all styling is done from CSS or XSL stylesheets. So a text only requirement, just means we don't generate any styles and image free templates are used to carry the content.

Our approach is to develop templates that are basic HTML frameworks then we can do virtually anything necessary to meet user requirements.  The templates are page carriers.  The backend processing supplies the data for the carrier, and then the CSS or XSL adds the presentation components.  The tree way partitioning of delivery, data, and presentation, gives us tremendous flexibility, and the three parts can be maintained inedendently. It has taken us years to get it where it is, but there have been some very talented people coming up with solutions along the way so we keep finding ways to improve it.

Cd&
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now