jPaulB Posted July 22, 2013 Share Posted July 22, 2013 Hi Everybody, I'm trying to figure out the process of using embedded fonts in an HTML document. I've come to understand the @face-font{} part pretty well(?) but seem to get into trouble when I try to use the fonts within the HTML document itself. I can do the @Font in the CSS part easily enough, but the next steps I will need are making me nuts. I don't want to make the new font-family part of a container, but that's all I can do now. .container {font-family:'myFancyFont';font-size: 48pt;color: #000000;} Doing this means I have to include a <DIV class='container'>Blah Blah Blah</DIV> in the HTML page. I sorta like the <DIV> thing but when I use too many of them I really do get lost. I would like to simply declare a text style ( avoiding the <H1> predefined ones) I would like to use a series like text_type01, text_type02, text_type03 etc. How would I declare text_type01 in a CSS statement, and declare the font-family in there? Then how would I apply text_type01 inside the HTML document? I'm guessing this would avoid all the <DIV> stuff, especially if I use two or three text_types within a single (prayer) <DIV> </DIV> block. Many, Many Thanks Paul Link to comment Share on other sites More sharing options...
Ingolme Posted July 22, 2013 Share Posted July 22, 2013 I'm not sure what you're asking, but there are a variety of CSS selectors, and the class attribute can be applied to almost any element. For example: <h1 class="text1">Value</h1>.text1 { font-family: CustomFont;} Or <header><h1>Value</h1></header> header h1 { font-family: CustomFont;} Link to comment Share on other sites More sharing options...
davej Posted July 22, 2013 Share Posted July 22, 2013 (edited) You don't have to name the class "container." You might create a class named "font1." .font1 {font-family: 'Open Sans', sans-serif;color: #000;}.pt18 {font-size: 18pt;}</style></head><body><div class="font1 pt18"><p>Blah blah blah...</p><p>Blah blah blah...</p>...</div> Edited July 22, 2013 by davej Link to comment Share on other sites More sharing options...
jPaulB Posted July 23, 2013 Author Share Posted July 23, 2013 Thank you answering, davej and IngoIme I understand what you folks are saying, but I'm trying to avoid creating a new <DIM> layer, just to draw, a statement that could be a single word. But what about that thought <header><h1>Value</h1></header> header h1 { font-family: CustomFont; } Why the h1? Does Header inherit from h1,rm is it the other way around? Why is h1 even there? Thanks, Paul Link to comment Share on other sites More sharing options...
davej Posted July 23, 2013 Share Posted July 23, 2013 (edited) I think you are going at this backwards. Create your content and then go back and fine tune the presentation. Why do you seem to think that you are going to be changing fonts so much that an ordinary class is too much trouble? Yes you can certainly declare... h1 {font-family:'myFancyFont';font-size: 48pt;color: #000000;} Edited July 23, 2013 by davej Link to comment Share on other sites More sharing options...
jPaulB Posted July 23, 2013 Author Share Posted July 23, 2013 Thanks for taking more time with my puzzle, davej I'm a pretty fresh user, so I don't have "content" to present yet, just a vague idea of how I want each of the pages to appear. Sort of like having tickets to the big-show but no date. I'm at the "Start-Line" where the learning curve is absolutely vertical. I'm unsure about the functional differences of using ".name{}" or "#name{}", and just the "name{}" styles. The tutorials I use assume I know the difference. I do appreciate the time and commentary you are giving me, though. Using the <h> tags works perfectly fine, so I'll just go forward. Thanks again, Paul Link to comment Share on other sites More sharing options...
davej Posted July 23, 2013 Share Posted July 23, 2013 (edited) With CSS3 selectors have become very complex. You have a tremendous number of selectors available to apply styles with. http://www.w3schools.com/cssref/css_selectors.asp There is also a css tutorial... http://www.w3schools.com/css/default.asp Edited July 23, 2013 by davej Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now