HTML Pro with custom fonts

Discussion Forums > Plugins, Customizing, Source Code

Replies: 13 Views: 88

devapps123 Apple Fan Posts: 50 Reg: Jul 12, 2012 Sarasota, FL 500	confirm \| cancel 04/10/16 07:36 PM (8 years ago) HTML Pro with custom fonts I'm using the HTML Pro plugin and trying to include CSS and custom fonts. I've managed to get the CSS working, but the documents aren't displaying the fonts properly. It's working on regular HTML online, but not on the emulator. Here is the code in the <head> tag: <head> <title>Page Title</title> <link href="style.css" rel="stylesheet" type="text/css"> <link href="/BT_Docs/Lato-Regular.ttf" rel="stylesheet" type="text/css"> <link href="Lato-Semibold.ttf" rel="stylesheet" type="text/css"> </head> Thank you in advance for your input and suggestions! Title Comments I'm using the HTML Pro plugin and trying to include CSS and custom fonts. I've managed to get the CSS working, but the documents aren't displaying the fonts properly. It's working on regular HTML online, but not on the emulator. Here is the code in the <head> tag: <head> <title>Page Title</title> <link href="style.css" rel="stylesheet" type="text/css"> <link href="/BT_Docs/Lato-Regular.ttf" rel="stylesheet" type="text/css"> <link href="Lato-Semibold.ttf" rel="stylesheet" type="text/css"> </head> Thank you in advance for your input and suggestions!

devapps123 Apple Fan Posts: 50 Reg: Jul 12, 2012 Sarasota, FL 500	04/10/16 07:37 PM (8 years ago) P.S. I need to do this for both iOS and Android Comments P.S. I need to do this for both iOS and Android

FunkyMonkey Aspiring developer Posts: 1177 Reg: Aug 07, 2013 blackpool 14,570	04/11/16 12:59 AM (8 years ago) with both IOS & Android, you are best testing on real devices before insertion in both stores, as I know the emulators on both, don't always act the way they do on a real device, and vice versa, Cheers Sean Comments with both IOS & Android, you are best testing on real devices before insertion in both stores, as I know the emulators on both, don't always act the way they do on a real device, and vice versa, Cheers Sean

AlanMac Aspiring developer Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	04/11/16 01:30 AM (8 years ago) In my most recent app, I added custom fonts and pretty much everything went into the CSS file - I found that for html, if your main html file can find the css file, then it just works. One of the things I have noticed with the html pro plugin is the way it handles html links. Absolute references are always OK, but it seems to not pick up local (relative) links e.g. to css and javascript. My thought is that perhaps your html is not finding the css. In-line css will definately work, I suspect if your css is in the same folder as your html that would work too. Comments In my most recent app, I added custom fonts and pretty much everything went into the CSS file - I found that for html, if your main html file can find the css file, then it just works. One of the things I have noticed with the html pro plugin is the way it handles html links. Absolute references are always OK, but it seems to not pick up local (relative) links e.g. to css and javascript. My thought is that perhaps your html is not finding the css. In-line css will definately work, I suspect if your css is in the same folder as your html that would work too.

AlanMac Aspiring developer Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	04/11/16 01:39 AM (8 years ago) Here is a small snippet to explain my css approach: @font-face { font-family: bbFont; src: url(http:MavenPro-Regular.ttf); } p { font-family: "bbFont"; color: dimgrey; } Comments Here is a small snippet to explain my css approach: @font-face { font-family: bbFont; src: url(http:MavenPro-Regular.ttf); } p { font-family: "bbFont"; color: dimgrey; }

devapps123 Apple Fan Posts: 50 Reg: Jul 12, 2012 Sarasota, FL 500	04/11/16 04:38 AM (8 years ago) Thank you. This is really helpful. So @AlanMac, what you're saying is to include all of the font commands in the css file and not in each individual HTML document, correct? So in the HTML document I would have... <head> <title>Page Title</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> And in the css file I would have... @font-face { font-family:'Lato'; src: url(http:Lato-Regular.ttf); } Is this correct? It's still not quite doing the trick but I think I may have some of the syntax wrong. What is the "URL" for the font family if it's included in the same folder? Comments Thank you. This is really helpful. So @AlanMac, what you're saying is to include all of the font commands in the css file and not in each individual HTML document, correct? So in the HTML document I would have... <head> <title>Page Title</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> And in the css file I would have... @font-face { font-family:'Lato'; src: url(http:Lato-Regular.ttf); } Is this correct? It's still not quite doing the trick but I think I may have some of the syntax wrong. What is the "URL" for the font family if it's included in the same folder?

AlanMac Aspiring developer Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	04/11/16 04:44 AM (8 years ago) Yep, that is pretty much the approach I used, without quotes around Lato Comments Yep, that is pretty much the approach I used, without quotes around Lato

AlanMac Aspiring developer Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	04/11/16 04:46 AM (8 years ago) I start with everything in the same folder, just to convince myself that I can make all the links work. Then I start to move things into separate folders if I feel I want to. Comments I start with everything in the same folder, just to convince myself that I can make all the links work. Then I start to move things into separate folders if I feel I want to.

devapps123 Apple Fan Posts: 50 Reg: Jul 12, 2012 Sarasota, FL 500	04/11/16 04:36 PM (8 years ago) Hello. The fonts are still not displaying correctly. It's just showing in Times New Roman default font. Any suggestions or ideas? Comments Hello. The fonts are still not displaying correctly. It's just showing in Times New Roman default font. Any suggestions or ideas?

AlanMac Aspiring developer Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	04/13/16 08:34 AM (8 years ago) Hi, it should work. It isn't clear what you have tried and what has and hasn't worked, e.g. if you are picking up the css or not, etc. I suggest you build a working prototype outside buzzouch, everything in one folder, test with a browser, then drag that into your project. Comments Hi, it should work. It isn't clear what you have tried and what has and hasn't worked, e.g. if you are picking up the css or not, etc. I suggest you build a working prototype outside buzzouch, everything in one folder, test with a browser, then drag that into your project.

devapps123 Apple Fan Posts: 50 Reg: Jul 12, 2012 Sarasota, FL 500	04/14/16 05:20 AM (8 years ago) Hi @AlanMac. As mentioned in original post "It's working on regular HTML online, but not on the emulator." I have everything in one folder. The CSS is picking up properly for things like buttons and image properties within the HTML Pro pages, so I know that part is working. It's only the font part that is not. The HTML Pro documents, CSS stylesheet and fonts themselves are all saved in the BT_Docs folder together. I exported the package to run on an android device and had the same issue on a live device. Could this be because of where the files are located? Do I need to use subdirectories? I don't think that would make a difference but I'm still stuck on getting the right font to display on all the pages. Comments Hi @AlanMac. As mentioned in original post "It's working on regular HTML online, but not on the emulator." I have everything in one folder. The CSS is picking up properly for things like buttons and image properties within the HTML Pro pages, so I know that part is working. It's only the font part that is not. The HTML Pro documents, CSS stylesheet and fonts themselves are all saved in the BT_Docs folder together. I exported the package to run on an android device and had the same issue on a live device. Could this be because of where the files are located? Do I need to use subdirectories? I don't think that would make a difference but I'm still stuck on getting the right font to display on all the pages.

devapps123 Apple Fan Posts: 50 Reg: Jul 12, 2012 Sarasota, FL 500	04/14/16 05:49 AM (8 years ago) The name of the font file is lato-Regular.ttf The way that it's referenced in the CSS is: @font-face { font-family: Lato, sans-serif; src: url(http:lato-Regular.ttf); } body,td,th { font-family: Lato, sans-serif; font-size: large; color: #000000; } Comments The name of the font file is lato-Regular.ttf The way that it's referenced in the CSS is: @font-face { font-family: Lato, sans-serif; src: url(http:lato-Regular.ttf); } body,td,th { font-family: Lato, sans-serif; font-size: large; color: #000000; }

devapps123 Apple Fan Posts: 50 Reg: Jul 12, 2012 Sarasota, FL 500	04/14/16 10:27 AM (8 years ago) So, I think that its' something about the syntax and I'm hoping one of you gurus can help me figure it out. I've got it so that its displaying a sans-serif font now. Just not the one I want! :) Is there a trick to the .ttf file reference vs. the "font-family" reference that I'm missing here? Comments So, I think that its' something about the syntax and I'm hoping one of you gurus can help me figure it out. I've got it so that its displaying a sans-serif font now. Just not the one I want! :) Is there a trick to the .ttf file reference vs. the "font-family" reference that I'm missing here?

Parteing247 Apple Fan Posts: 1 Reg: Apr 15, 2016 Brick, New Jers... 10	04/15/16 07:27 PM (8 years ago) Just out of curiosity how would I find a graphics artist on here, and A developer can create my app in which I need FaceTime capabilities, messaging and a whole bunch of other user friendly capabilities. I have no idea how to do it or even start a post in the forum Comments Just out of curiosity how would I find a graphics artist on here, and A developer can create my app in which I need FaceTime capabilities, messaging and a whole bunch of other user friendly capabilities. I have no idea how to do it or even start a post in the forum

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.

Discussion Forums > Plugins, Customizing, Source Code

HTML Pro with custom fonts

Title

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments