WordPress.org

Forums

WordPress and Font-face (4 posts)

  1. mrsenorhill
    Member
    Posted 4 years ago #

    I'm trying to style a font that is being referenced inline using fancy box on a wordpress blog. Using both chrome and firefox.

    I've tried this two ways:

    1.) Loading the @font-face on the theme's stylesheet, then adding a <p style="font-family:fontgoeshere"> in html markup on the page itself. I don't want all of the paragraph text on the blog to load with that font, just the divs inline on the fancybox. I know all the sources are correct because I've tried them in html files and they load perfectly.

    2.) I've tried loading the @font-face on the page html markup itself. I add a style and place the call in that style at the top of the page. Then I reference the font-family in the same way that works in the normal html page.

    The fact that it is working on a simple html page makes me think I'm doing something wrong specifically in wordpress.

    Here is the url to the page: http://elparquenuez.com/sandbox/wordpress/?page_id=4

    Click on the first image to load the fancy box.

    Here's the code for the page:

    <style type="text/css">
    
    @font-face {
    font-family: "fanwood";
    src: url(http://localhost:8888/html5/fanwood/Fanwood.otf);
    }
    
    </style>
    <div style= "display:none" class="fancybox-hidden">
    <div id="fancyboxID-1" style="width: 900px; height:120px;">
    <img style="position:absolute;left:0px;top:0px;z-index:-1;" src="http://localhost:8888/fancybox/INC_VirtualTour_Photos_B-1.jpg" alt="Welcome To Camp" />
    <p style="width: 580px;height: 100px;margin-top: 485px;margin-left: 40px;font-family:fanwood;font-size: 16px;">Summertime is the time to break away from the routine of the school year.  Pequot, Sherwood Camps for ages 6 to 13, and Pioneer Village Camps for teens ages 14 and 15 are dedicataed to nurturing boys and girls in a safe, creative, and natural setting where friendships, community, and personal responsibility flourish.  Our Day Camp program offers the same activitities without the sleepover.</p>
    </div>
    </div>
    
    <div style="display:none" class="fancybox-hidden">
    <div id="fancyboxID-2" style="width: 900px; height:110px;">
    <img style="position:absolute;left:0px;top:0px;z-index:-1;" src="http://localhost:8888/fancybox/INC_VirtualTour_Photos_B-2.jpg" alt="Welcome To Camp" />
    <p style="width: 500px;height: 100px;margin-top: 495px;margin-left: 30px;font-family: Lucidia Sans;font-size: 16px;">Only a few camps founded in 1880's still exist and we are proud to be the oldest operating co-ed camp in the nation.  Started in 1886, by the Episcopal Church of the Incarnation in Manhattan, Incarnation Camp, today carries the traditional names of Camp Pequot for Boys, Camp Sherwood for Girls, and Pioneer Village for teens.</p>
    </div>
    </div>
    
    <div style= "display:none" class="fancybox-hidden">
    <div id="fancyboxID-3"  style="width: 900px; height:600px;">
    <img style="position:absolute;left:0px;top:0px;z-index:-1;" src="http://localhost:8888/fancybox/INC_VirtualTour_Photos_B-4.jpg" alt="Welcome To Camp" />
    <p style="color: black;width: 480px;height: 100px;margin-top: 80px;margin-left: 40px;font-family: Lucidia Sans;font-size:16px">Summertime is the time to break away from the routine of the school year.  Pequot, Sherwood Camps for ages 6 to 13, and Pioneer Village Camps for teens ages 14 and 15 are dedicataed to nurturing boys and girls in a safe, creative, and natural setting where friendships, community, and personal responsibility flourish.  Our Day Camp program offers the same activitities without the sleepover.</p>
    </div>
    </div>
    <div style="display:none" class="fancybox-hidden">
    <div id="fancyboxID-4"  style="width: 900px; height:600px;">
    <img style="position:absolute;left:0px;top:0px;z-index:-1;" src="http://localhost:8888/fancybox/INC_VirtualTour_Photos_B-5.jpg" alt="Welcome To Camp" />
    <p style="width: 520px;height: 100px;margin-top: 495px;margin-left: 40px;font-family: Lucidia Sans;font-size: 16px;">Campers ages 6 to 13 inspiblack by freedom and creativity by choosing their own camp experiences from a roster of fun and enriching activities.  All campers receive American black Cross swimming and boating instruction every day.  Boys and girls live and dine separately.</p>
    </div>
    </div>
    
    <div style="display:none" class="fancybox-hidden">
    <div id="fancyboxID-5"  style="width: 900px; height:600px;">
    <img style="position:absolute;left:0px;top:0px;z-index:-1;" src="http://localhost:8888/fancybox/INC_VirtualTour_Photos_B-6Ba.jpg" alt="Welcome To Camp" />
    <p style="width: 580px;height: 100px;margin-top: 485px;margin-left: 40px;font-family: Lucidia Sans;font-size: 16px;">Adventure and personal growth are the heart of this community of campers ages 14 and 15.  Pioneer Village participants explore New England on exciting 3 to 5 day hiking, biking and canoeing trips.  Back at camp, days are filled with activity periods called "Festivals" in which campers and staff create fanciful (and often playful) activities, and create lifelong memories cooking breakfast and dinner over campfires daily.</p>
    
    </div>
    </div>
    
    <div style="display:none" class="fancybox-hidden">
    <div id="fancyboxID-6"  style="width: 900px; height:600px;">
    <img style="position:absolute;left:0px;top:0px;z-index:-1;" src="http://localhost:8888/fancybox/INC_VirtualTour_Photos_B-7.jpg" alt="Welcome To Camp" />
    <p style="color: black;width: 520px;height: 100px;margin-top: 80px;margin-left: 40px;font-family: Lucidia Sans;">Running in one week sessions for boys and girls ages 6 to 13, local families can enjoy a day program very similar to our overnight camps.  Every day, campers choose from a range of activities, spend two full hours at the waterfront and get American black Cross swimming and boating lessons.  Lunch is provided and transportation is available.</p>
    </div>
    </div>
    
    <a rel="example_group" href="#fancyboxID-1" class="fancybox">Image 1</a>
    <a rel="example_group" href="#fancyboxID-2" class="fancybox">Image 2</a>
    <a rel="example_group" href="#fancyboxID-3" class="fancybox">Image 3</a>
    <a rel="example_group" href="#fancyboxID-4" class="fancybox">Image 4</a>
    <a rel="example_group" href="#fancyboxID-5" class="fancybox">Image 5</a>
    <a rel="example_group" href="#fancyboxID-6" class="fancybox">Image 6</a>

    Can this even be done on wordpress? Or does wordpress parse the css and ignore it?

    Thanks in advance for any help!

  2. Chip Bennett
    Theme Review Admin
    Posted 4 years ago #

    @font-face works just fine with WordPress. I use it on my site with no problems whatsoever.

  3. mrsenorhill
    Member
    Posted 4 years ago #

    Chip,

    Thank you for the reply. Do you have any success with embedding @fontface styles on a page instead of the stylesheet?

  4. Chip Bennett
    Theme Review Admin
    Posted 4 years ago #

    If not in the stylesheet, your best bet would be to enqueue a script directly in the document head. I've not tried this method with @font-face, so I couldn't say whether it would work any differently.

    In either case, though, you'll want a *.css file to hold your CSS (including the @font-face declarations), mainly because it is not best practice to dump CSS directly into the document head.

Topic Closed

This topic has been closed to new replies.

About this Topic