Jump to content

Search the Community

Showing results for tags 'font'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 22 results

  1. sonjoyray


    Which method is better to use font on the website? Which can be used for both desktop and mobile. I think it's better to use @font-face. Because the fonts are downloaded on my own website and will come in handy on devices that don't support fonts. I also want feedback from you
  2. Hi all, how are we? I'm have issues with a font on my website, i've only just start here >>> https://crtest1.co.uk/ I used font squirrel to convert my font, i've done this many times before, never seen the issue i'm having... @font-face{ font-family: 'angelfaceregular'; src: url('/wp-content/uploads/2020/fonts/angelface-3-webfont.eot'); src: url('/wp-content/uploads/2020/fonts/angelface-3-webfont.eot?#iefix') format('embedded-opentype'), url('/wp-content/uploads/2020/fonts/angelface-3-webfont.woff') format('woff'), url('/wp-content/uploads/2020/fonts/angelface-3-webfont.ttf') format('truetype'), url('/wp-content/uploads/2020/fonts/angelface-3-webfont.svg') format('svg'); } h1 { font-family: 'angelfaceregular'; } it displays fine in firefox and safari the problem is some of the letters are displayed as only outlines in chrome. can anyone help me please? thank you in advance, and stay safe!
  3. hi forom piople i have a big problem that i dont succsed to solved for long time Setup description : i used with the NodeMcu ESP8266 as a web server Problem : font are not display on android but can be shwon on iPhone and regular web brouser all my knowlge on HTML is 80% from this site please find below the code const char homePage[] PROGMEM = R"=====( <html> <head> <title> Engineering Project </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <style> body{ margin-top: 10px; font-family: Times New Roman; background-color:#333333; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } h1{ font-size: 3.5em; /* 40px/16=2.5em */ margin: 0px auto 10px; } .buttonSetup { display: block; width: 130px; background-color: 2c3e50 ; border:4px solid #DAA520; color: #DAA520 ; padding: 30px 30px; text-decoration: none; font-size: 50px; margin: 0px auto 50px; cursor: pointer; border-radius: 10px; } .Cut { display: block; width: 130px; background-color: 2c3e50 ; border:4px solid #DAA520; color: #DAA520 ; padding: 30px 30px; text-decoration: none; font-size: 50px; margin: 0px auto 1px; cursor: pointer; border-radius: 10px; } .header_cut { background-color: #333333; border-width: 4px; border-color: yellow; color: #f2f2f2; padding: 1px 1px; display: inline; } .button { display: block; width: 180px; background-color: 333333 ; border:4px solid #DAA520; color: #DAA520 ; padding: 13px 30px; text-decoration: none; font-size: 50px; margin: 0px auto 5px; cursor: pointer; border-radius: 4px; } .header_button { background-color: ; border-width: 7px; border-color: yellow; color: #f2f2f2; padding: 15px 10px; } .Cut { background-color: #333333; color: white; border-width: 7px; border-color: #cccccc; } .buttonSetup { background-color: #333333; color: white; border-width: 7px; border-color: #cccccc; } .button-off:active {background-color: #2c3e50;} .my_button:active {background-color: white;} </style> </head> <body> <center> <h1 class="header_button" > &nbsp; Engineering Project &nbsp; </h1> <a class="buttonSetup my_button" href="/calibration"> <i class="fas fa-users-cog"></i> <i class="fas fa-cog fa-spin"></i></a> <a class="Cut my_button" href="/cut_start" > <i class="fas fa-fan fa-spin"></i> </a> <a class="header_cut my_button" href="/cut_start" > Start to Cat </a> </center> </body> </html>
  4. Hello everyone. (Sorry for my bad english, I'm french)So I have an HTML page with a header, a footer, a lateral menu and of course, content.It is perfectly sized for desktops and mobiles (thanks to a media query I invented, which is : @media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){ /* MY CODE HERE */ } The content is perfectly adjusted like this : , thanks to: html{font-size: 200%} in this media query. I precise that ALL my font-sizes and padding between divs / paragraphs are in "rem" unit. But the problem is, that when I exceeds the precise nuber of 89 characters, the texte suddenly look like this : But only on mobile devices (with the media query I said previously)... I visualized this with the Chrome developer tool -> Device toolbar (Ctrl + Shift + I then Ctrl + Shift + M) There I do a little as if it was not serious but it's days that I drudge everywhere and nobody was able to give me an answer ... I put the page online so you can watch it more precisely...http://vincentvincent.rf.gd/l-histoire.html Thanks for your help.
  5. I downloaded the latest w3.css framework and updated the css for html, body to use a different font-family. html,body{font-family:'Lato','Open Sans',font-weight:300;sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden} However when I did that the font that is now displayed when I use the following code displays an incorrect (and serif) font. <div class="w3-container w3-panel w3-card-2 w3-blue"> <b>System Alert:</b> <br /> System currently in <em>Development Mode</em> </div> What gives? How can I get this to resolve.
  6. dominicw

    Font Stretch

    I am interested in the CSS font-stretch property, but I am struggling to find any information about which fonts support condensed and expanded variants. Does anyone know of any cross-platform fonts that support this? I would like to avoid loading fonts from an external source if possible.
  7. Hello, this is my site: http://cvkj.agencialosnavegantes.cl/ I have a font called "Averta" and i uploaded via FTP all the .otf filesto the /wp-includes/fonts/ on my WordPress. Now i'm calling it like this on the Custom CSS: @font-face { font-family: "Averta"; src: url("http://cvkj.agencialosnavegantes.cl/wp-includes/fonts/AVERTA LIGHT.OTF"); } body { font-family: "Averta"; font-weight: normal; }
  8. Hi guys! I'm currently working on a new online store and i have a small issue that really bugs me. I'm using "font variant: small-caps" + "text-transform: lowercase" for the menu and all headlines (Font: "Questrial"). It looks great in Chrome and Safari on my Mac and almost as good on my Galaxy S6.. but Firefox, it looks like the small caps ate too much food. They are too thick! The body text is as far as i can see the same. I'm no expert, but i understand that the browsers render fonts (or the small caps in my case) differently. My question is if there is any way to work around this or should i just accept the fact? Many thanks!
  9. Hello, I'm working at a site in wordpress, I use 'inspect element' a lot, and I want to know how can I see all the default font styles and their preview, so I can choose it more easily. In inspect element it only shows me the one available for font-family : serif, sans-serif, monospace, fantasy etc. Is there maybe a site or something (or a chart) where I can instantly see all those default text styles (so not something I have to download), and their preview? Thanks.
  10. Hello, for the longest time we were using FPDF to generate our pdf invoices. We recently upgraded to TCPDF and noticed we lost the bold font style. Our system admin says the font files are where they should be, in fact we can call $pdf->SetFont( 'Arial', 'BI', 10 ); and it is bold italic. Pass in 'I' and it is Italic but if we only pass in 'B' for bold, it display as normal font, no style. In the older FPDF, bold worked fine. Is there something we might be missing? We really need headers, certain labels and info to stand out in bold. Thank you for any help with this. Running the latest version of TCPDF on a Linux server. Thank you for any help with this.
  11. Hi! This actually my first post, but excited to finally be part of the W3 forum! So I recently installed a WP template and started customizing it and used the Page Builder option for a few of the pages. My question is on the home page where the 3 icons are, yellow blue yellow, below them is text. I have tried to alter the color of the text when I go to the HOME page itself in the WP admin to just highlight and change font color and then when I update it just goes back to what it has been. Wondering if it is the Page Builder messing with it? Tried also going into the style.css to look for where i could alter it but am having trouble there as well.. Any help would be appreciated! Thanks! heres the site - www.asamusic.us
  12. How to change only part of the font to a different color in a navigation link? See my website; www.cleareyesight-batesmethod.info On the left < is the navigation. I want the top words in each pages navigation to be in green and the rest of the text to stay navy blue. Example, in the home page, top navigation; I want NATURAL EYESIGHT IMPROVEMENT to be green. The rest of the text under it to stay navy. When I try to change the color it does not work and it also causes spaces between the 2 different colored text. How to do this? Maybe in html? Thanks, Mary
  13. i created a page for testing diffrent fonts but its not working.cant find the problem maybe you can help me . thanks @charset "utf-8";@font-face { font-family:'lottepaperfang'; src: url(‘}@font-face { font-family: 'Astri1'; src: url(‘}@font-face { font-family:'Astronau' ; src: url(‘}@font-face { font-family:'MarketDeco' ; src: url(‘}@font-face { font-family: Astri2; src: url(../Homepage2/fonts/Astri2.ttf);}@font-face { font-family: 'lekton005' ; src: url(‘}@font-face { font-family:'Normat' ; src: url(‘}@font-face { font-family: 'secrcode'; src: url(‘}@font-face { font-family: tm; src: url(../Homepage2/fonts/tm.ttf);}h1{ color: black; text-align: left; font-size: 18pt; font-family: lekton005;}h2{ color: black; text-align: left; font-size: 18pt; font-family: secrcode;}h3{ color: black; text-align: left; font-size: 18pt; font-family: MarketDeco;}h4{ color: black; text-align: left; font-size: 18pt; font-family: Normat;}h5{ color: black; text-align: left; font-size: 18pt; font-family:Astronau ;}h6{ color: black; text-align: left; font-size: 18pt; font-family:Astri2 ;}#test{ font-family: tm; color: black; text-align: left; font-size: 18pt;}
  14. I have this really annoying problem with my webfont having different natural spacing on my Mac compared to the PC.Here's the difference: MAC: PC: As you can see the natural spacing is beneath the text on Mac and above on PC. The problem is cross browser. I've tried all kinds of css tweaking including line-height, padding, height of div; but as you can see the problem is apparently not in the css but in the font rendering itself.Anyone with a clue about this?Thanks!
  15. I'm using a ZooEffect Gallery, which is great-except for two things; A) The images do not read links-despite them being a gallery option. You can't seem to change the font within the gallery-I tried being adjusting the CSS-to no avail, I put it back and then after a few days, ZooEffect got back to me with a solution, Which also didn't work. Most people seem to be able to pinpoint these issues using Safari Developer or FireBug. Can anybody pinpoint for me or at least tell me how I would do this? ThanksLauren
  16. I'm trying to change the font of my blog title. Somehow, I'm screwing it up. I installed two web fonts, one to use as the title and one to use as the tagline. The font for the tagline works just fine. The title, however, won't take, it just keeps defaulting to serif. Here is why I'm lost: 1. I can use Cinzel (the font I want as the title) as the tagline and it works just fine. 2. I can change the title to Verdana (or any other random font), and that works fine, but when I try Cinzel, it goes back to serif. Anyone know what I'm doing wrong? Here's the blog. @import url(http://fonts.googleapis.com/css?family=Cinzel);@import url(http://fonts.googleapis.com/css?family=Parisienne);/*** header ***/#title-area #title {text-align:center; text-transform: uppercase;}#title-area #title a{font-family: 'Cinzel', serif;}/*** tagline ***/#title-area #description{text-align:right; font-family:'Parisienne', cursive; color:palevioletred; font-size: 20px;}
  17. Hi guys I'm Dave from Philippines Im a newbie in this forum and this is my 1t post... Well this is my question:ins this css code: I know that 11px and 1.5 em are both used in size attribute but the "/"(division sign) confused me. .What does this 11px/1.5 em do?Does it divide 11px/16px?'or what can anyone please explain I want to learn cSS!!! THANKS!!!
  18. I have 2 questions, but first the most ununderstandable for me at the moment(both questions got to do with the same class div): 1. The font with the text at the right side - the divclass "sidebox" is changing to a smaller zise when on another page eventhough i have the same css file, and the same class and "p" in the html file! Why is this? ompare the file index51.html with beachflag.html, and also the css wich i am attaching aswell. 2. What do i need to write in the css for the "sidebox1, 2, 3" classes for them to be on the some spot on every page? I have tried with position absolute, and also without position - and just with float:right; and margin settings, but it still changes on every different page. On beachflag.html for example the 3 boxes are shown much lower to the bottom then on the index. beachflag.html index51.html pse5.css
  19. Hi Everyone,Please find the attached "The Place.png" file. Could you please tell me the Name of that Font style?
  20. Hello, So I am fairly new to the developer world and I am dong this on my own (self taught). I have a friend who sent me a template design of something to put together, he also sent me the CSS and HTML code so i code use it in reference if I was stuck... I noticed in the CSS there is a lot of reference for value "museo-slab1" under then font property. What is this? Is this a type of font? I hope this question is clear enough to understand. being fairly new it is hard for me to know the right question to ask. Any help would be appreciated. Thanks Here is one of the lines of CSS that I found it in, hopefully this helps... font:normal normal 500 11px/21px "museo-slab-1","museo-slab-2",serif;
  21. Could someone take a look at the below code, and tell me why "<p class="rentalFleetText">" is inheriting a different CSS class. To be specific I think it's inheriting ".bottomRight p"?Being new to HMTL and CSS, my best guess is that I'm only allowed to have one font class per cell, or something weird, but honestly I have no idea.HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sarasota-Tampa Express Homepage</title><link href="all.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script></head><body id="theHeader" onload="MM_preloadImages('images/homeActive.png','images/about-usActive.png','images/route-and-scheduleActive.png','images/flight-informationActive.png','images/fareActive.png')" ><table id="headerTable" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="logoBox"> <img src="images/Sarasota-Tampa-Express-Logo.png" width="205" height="75" alt="Logo" /></td> <td> <div id="rightsideHeader"> <p id="tagLine">We make things convenient for you! <span id="phoneNumber">Call Today! (941)366-6600</span></p> <div align="left" id="navigation"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/homeActive.png',1)"><img src="images/home.png" alt="Home" name="Home" width="82" height="33" border="0" id="Home" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutUs','','images/about-usActive.png',1)"><img src="images/about-us.png" alt="About Us" name="AboutUs" width="110" height="33" border="0" id="AboutUs" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Route','','images/route-and-scheduleActive.png',1)"><img src="images/route-and-schedule.png" alt="Route & Schedule" name="Route" width="178" height="33" border="0" id="Route" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FlightInfo','','images/flight-informationActive.png',1)"><img src="images/flight-information.png" alt="Flight Information" name="FlightInfo" width="184" height="33" border="0" id="FlightInfo" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Fare','','images/fareActive.png',1)"><img src="images/fare.png" alt="Fare" name="Fare" width="70" height="33" border="0" id="Fare" /></a></div> </div> </td> </tr></table><table id="mainTable" width="1024px" height="174px" align="center" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="top" colspan="2" valign="bottom"><img align="middle" alt="Introductory Homepage Image" src="images/shuttlebus.png"><p id="welcome" align="left">Welcome to Sarasota - Tampa Express</p><p id="statement" align="left">Sarasota-Tampa Express offers regular daily round trip shuttle service<br>to and from Tampa International Airport.</p></td> </tr> <tr> <td id="bottomLeft"> </td> <td class="bottomRight" align="center" valign="top"><p>Rental Fleet</p><img width="552" height="140" alt="Rental Fleet" src="images/rental-fleet.png"><p class="rentalFleetText">Our limo vans get your big family from place to place.</p></td> </tr> </table> </body> CSS: .body { font-family: Verdana,Geneva,sans-serif;}.table { margin: 0; padding: 0;}.td { border-style: none; margin: 0; padding: 0;}img { border-style: none; text-decoration: none;}p {margin: 0px;}#theHeader { background-image: url("images/header-gradient.png"); background-repeat: repeat-x; margin: 0;}#headerTable { height: 150px; margin-left: auto; margin-right: auto; width: 1024px;}#logoBox { padding-left: 50px; width: 268px;}#tagLine { color: #FFFFFF; font-family: Verdana,Geneva,sans-serif; font-size: 16px; font-style: italic; height: 45px; margin: 0; padding-top: 35px; text-align: left; width: 706px;}#rightsideHeader { height: 150px; margin-top: 0; width: 624px;}#phoneNumber { padding-left: 100px;}#navigation { height: 70px; width: 706px;}#mainTable { background-image: url("images/background-gradients.png");}.top { height: 174px; margin: 0; overflow: hidden; padding: 0; width: 1024px;}.top img { float: left; margin-right: 15px;}#welcome {color: #C34306;font-family: Arial,Helvetica,sans-serif;font-size: 28px;font-style: normal;font-weight: bold;height: auto;text-shadow: 2px 2px 15px #4F4F4F;width: 1024px;text-indent: -37px;margin-bottom: 45px;margin-top: 0px;margin-right: 0px;margin-left: 0px;}#statement { color: #000000; font-family: Arial,Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-weight: bold; height: auto; margin: 0; width: 1024px;}#bottomLeft { height: 440px; width: 406px;}.bottomRight { height: 440px; width: 618px;}.bottomRight p {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-style: italic;font-size: 19px;text-align: center;}.bottomRight img {margin-top: auto;margin-right: auto;margin-bottom: -36px;margin-left: auto;}.rentalFleetText {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;width: 160px;}
  22. I'm trying to get these sliders to work so a user can adjust the readability of the website. i have a slider to adjust the font size, the number of colums and the background color. For the background color i want to have some sort of color picker but i still need to look into that but if you have any suggestions please let me know! here's the code: //fontsizewindow.onload = function() {var value_display = document.getElementById("value_display").className.class="value_display";var lorem = document.getElementsByClassName("lorem");document.getElementById("slider").onchange = function() {value_display.value = this.value;lorem.style.fontSize = this.value + "em";}}//kolom aantalfunction changeColumnNoSlider(event) {var val = event.target.value;document.getElementById('columns-no-value').className='columns-no-value'.textContent = val;var el = document.getElementsByClassName('kolom');el.style.webkitColumnCount = val;el.style.MozColumnCount = val;} The problem is that i use it for blog post so it's not just one article i want to adjust. the code works if i use .getElementById but i need to use classes. Thanks in advance!
  • Create New...