So I'm trying to style text for a hotspot using the CSS Styles option in the skin editor under the Advanced options but for some reason only the font-size property works. I'm trying to use the font-family property as well but it doesn't work.
I heard that you can create an external CSS document and style text with it but I have no idea what to put in this document. Does it have to have any html or just CSS rules for text. I tried this but still doesn't work:
p {
font-family: verdana;
font-size: 16px;
}
Thanks in advance!
Styling Text with CSS for a hotspot
Click on the link that reads 'Styling with CSS' in this post to create an external CSS.
viewtopic.php?f=6&t=13521#p56533
viewtopic.php?f=6&t=13521#p56533
Hi,
Try this tutorial of mine "Styling Text with CSS and Local Fonts" it may give you some clarity around styling with CSS.
https://tonyredhead.com/pano2vr/styling-with-css
Tony
Try this tutorial of mine "Styling Text with CSS and Local Fonts" it may give you some clarity around styling with CSS.
https://tonyredhead.com/pano2vr/styling-with-css
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
-
- Posts: 11
- Joined: Wed Dec 21, 2016 11:48 am
Hi Tony
Thanks a lot for the link. I actually found your tutorial yesterday and started going through it.
One thing is still not clear to me. If I want to include the actual font files (.eot, .ttf, .woff and .svg) in the folder Pano2VR generates, how do I link the css file to these font files so that the browser knows where to look for them?
Thanks for your help.
Bw
Greg
Thanks a lot for the link. I actually found your tutorial yesterday and started going through it.
One thing is still not clear to me. If I want to include the actual font files (.eot, .ttf, .woff and .svg) in the folder Pano2VR generates, how do I link the css file to these font files so that the browser knows where to look for them?
Thanks for your help.
Bw
Greg
Hi Greg,
Are you using V5 or V6 app?
Tony
Are you using V5 or V6 app?
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
-
- Posts: 11
- Joined: Wed Dec 21, 2016 11:48 am
Hi Tony
I'm using Pano2VR 6.0.3 for mac.
I tried following all the steps in your tutorial and I have been unsuccessful. I can style the text but the font type still remains unchanged (default I guess).
I'm using a mac so I'm thinking that maybe I should include several fonts (.ttf and .woff) as these are used by Firefox. I want to use the OpenSans bold and regular so I'm not sure what I shall put as a font family for both of them.
Any help appreciated.
Greg
I'm using Pano2VR 6.0.3 for mac.
I tried following all the steps in your tutorial and I have been unsuccessful. I can style the text but the font type still remains unchanged (default I guess).
I'm using a mac so I'm thinking that maybe I should include several fonts (.ttf and .woff) as these are used by Firefox. I want to use the OpenSans bold and regular so I'm not sure what I shall put as a font family for both of them.
Any help appreciated.
Greg
Have you checked "Disable default CSS font" in the HTML Template. You get to the template by clicking on the little spanner/screwdriver button in the HTMl output section.
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
-
- Posts: 11
- Joined: Wed Dec 21, 2016 11:48 am
Hi Tony
I did disable it and still no good. There must be sth wrong with my browser because even I open the finished project you provided in the tutorial, the text is styled properly but the font type is not right (displaying as Times New Roman).
I did disable it and still no good. There must be sth wrong with my browser because even I open the finished project you provided in the tutorial, the text is styled properly but the font type is not right (displaying as Times New Roman).
-
- Posts: 11
- Joined: Wed Dec 21, 2016 11:48 am
I think I know what the problem is.
When modifying the HTML5 Template file, I declared two types of fonts from the same family: Open Sans Regular and Open Sans Bold.
However, the CSS file only recognises one type. This is really confusing.
Greg
When modifying the HTML5 Template file, I declared two types of fonts from the same family: Open Sans Regular and Open Sans Bold.
However, the CSS file only recognises one type. This is really confusing.
Greg
-
- Posts: 11
- Joined: Wed Dec 21, 2016 11:48 am
Solved it! For some reason, when I was declaring the fonts in the HTML5 template, these were not included in the <head> section of my .html document.