SOLVED Afterburner 2 - Mobile Responsive Font
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
Hello,
I am using Comic Sans font in modules and articls on my Afterburner2 site. The fonts appear in desktop version of my site. When I open the page on a mobile device the font is something different. I don't want this how can I make it comic sans everywhere?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
Where did you load the font stack for comic sans ?
Please see this page for a tutorial on adding fonts to one of our templates http://docs.gantry.org/gantry4/tutorials/adding-a-custom-font .
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
Hi, I only selected the font in my JCE editor when creating an article. The fonts show up on my desktop site fine.
I will follow the guide as long as I know I have to do it for mobile version of my site (responsive). I will let you know.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
JCE will not add the necessary CSS to add the fontstack to work in all browsers. All it is doing is hardcoding an inline CSS statement in the HTML (a bad and inefficient idea) and using the font file that is already loaded on your PC itself (other users won't have that font - nor will other devices which is why you have to load the fontstack correctly rather than assuming that every device has that font installed).
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
That makese sense - thank you.
I added a "fonts" folder in my template. I downlaoded Comic Sans M3 which came with several files all ending in .ttf. I am only calling the "ComicSansMS3.ttf in my CSS per below.I also added the font in Gantry Framework and selected it. I don't see the font loading still.
CSS:
/* Adding Font COMIC SANS MS*/
@font-face {
font-family: 'ComicSansMS3';
url('../fonts/ComicSansMS3.ttf') format('truetype'),
}
.font-family-sans-serif {
font-family: "Comic Sans MS", cursive, sans-serif
font-weight: normal;
font-style: normal;
}
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
To work in all browsers, you need all four files font files, ttf, svg, eot, and woff.
If you want to use the font from template manager you have to make the changes to templateoptions.xml as described in the link.
If you want to use the font from CSS then you have to write CSS statements to apply it to the elements that you require.
Your code is also wrong. You called the font "ComicSansMS3" so that's how you have to refer to is fron then on in any font-family attribute. Also, the class "font-family-sans-serif" is wrong too it has to match the name given in your templateoptions.xml
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Robert Tee
- Sr. Rocketeer
- Posts: 121
- Thanks: 0
-
Thank you. I ended up using a free font from font squirell so as to use the webfront kit. I used thier css stylesheet and updated the font paths in my custom css. It worked after I removed my override html font lines for comic sans everywhere in my articles.
I'm still noticing a small issue with the responsive layout - if you render the home page you'll see the title test overlaps slightly for some reason. I haven't been able to test it on other devices other than an iphone 6 plus. - Last Edit: 8 years 3 months ago by Robert Tee.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
1. You have illegal markup in the HTML "sspan" is not a valid HTML tag
2. stop using inline CSS styling - it's inefficient and a nightmare to maintain - use custom CSS instead.
3. you have made the font-size 24px with inline styling but have not changed the line-height (which is set to 20px) in CSS - therefore this is why the lines of text overlap.
4. I recommend that you stop using wysiwyg editors and instead use out rokpad editor. wysiwyg editors add lots of unnecessary code and they also tend to add far too much inline in the html.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.050 seconds